document 객체를 이용해서 element를 생성만 하고 추가하지 않으면 되는건가?
| // Create a canvas element var canvas = document.createElement('canvas'); canvas.width = 500; canvas.height = 400; // Get the drawing context var ctx = canvas.getContext('2d'); // Then you can do stuff, e.g.: ctx.fillStyle = '#f00'; ctx.fillRect(20,10,80,50); |
| var offscreen = new OffscreenCanvas(256, 256); |
[링크 : https://stackoverflow.com/questions/3892010/create-2d-context-without-canvas]
크롬에서 확인해보니 먼가 되는것 같긴 하다?
버전 114.0.5735.198(공식 빌드) (64비트)
| var offscreen = new OffscreenCanvas(256, 256); undefined ctx = offscreen.getContext("2d") OffscreenCanvasRenderingContext2D {canvas: OffscreenCanvas, globalAlpha: 1, globalCompositeOperation: 'source-over', filter: 'none', imageSmoothingEnabled: true, …} |
+
OffscreenCanvas() 에는 toDataURL()이 없나보다.
+
getContext("2d").canvas 로 하면 굳이 복잡하게 하지 않아도 바로 imf로 떨어지는 듯.
| var first = document.getElementById('first').getContext('2d'); var sec = document.getElementById('second').getContext('2d'); // draw on first canvas first.fillStyle = '#07C'; first.fillRect(0, 0, first.canvas.width, first.canvas.height); // draw image on second canvas var img = new Image(); img.src = "http://lorempixel.com/300/300"; img.onload = function() { sec.drawImage(img, 0, 0, sec.canvas.width, sec.canvas.height); sec.drawImage(first.canvas, 100, 100, 100, 100); // draw first canvas on a portion of second canvas }; |
'Programming > javascript & HTML' 카테고리의 다른 글
| html video 재생종료 event (0) | 2023.09.02 |
|---|---|
| 숫자에 콤마 찍기(자릿수 표현) (0) | 2023.07.27 |
| html canvas와 시간 그래프 흘리기 (0) | 2023.07.06 |
| javascript 정수는 정수가 아니다 (0) | 2023.04.06 |
| websocket binarytype (0) | 2023.04.04 |
