Home

Learn Canvas.

Get context.

<canvas id="canvas1">
var canvas = document.getElementById( 'canvas1' ); var ctx = canvas.getContext( '2d' );

Coordinates.

Primitives.

ctx.beginPath(); ctx.moveTo( 15, 15 ); ctx.lineTo( 85, 85 ); ctx.stroke();
ctx.fillRect( 15, 15, 50, 50 ); ctx.clearRect( 25, 25, 50, 50 ); ctx.strokeRect( 35, 35, 50, 50 );

Bit copy.

ctx1.font = '30px Arial'; ctx1.fillStyle = 'blue'; ctx1.fillText( 'Sample', 1, 40 ); var imgData = ctx1.getImageData( 0, 0, 100, 100 ); ctx2.putImageData( imgData, 30, 50 ); var image = new Image(); image.src = canvas1.toDataURL('image/png'); image.onload = () => { ctx3.drawImage( image, 30, 50 ); };