canvas example

messing with canvas

HTML

<canvas id="canvas" width="200" height="200">This text is displayed if your browser does not support HTML5 Canvas.</canvas>

CSS

canvas {
    border: 1px dotted black;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'red';
ctx.lineWidth = 2;

ctx.beginPath();

ctx.moveTo(10, 10);
ctx.lineTo(10, 30);
ctx.lineTo(30, 30);
ctx.lineTo(30, 10);
ctx.closePath();

ctx.moveTo(40, 40);
ctx.lineTo(40, 90);
ctx.lineTo(90, 90);
ctx.lineTo(90, 40);
ctx.closePath();

ctx.moveTo(10, 10);
ctx.lineTo(160, 160);
ctx.closePath();

ctx.moveTo(100, 100);
ctx.lineTo(100, 160);
ctx.lineTo(160, 160);
ctx.lineTo(160, 100);
ctx.closePath();

ctx.stroke();
ctx.fill();


var offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = 200;
offscreenCanvas.height = 200;
var context = offscreenCanvas.getContext('2d');

// draw something into the OFFSCREEN context
//context.fillRect(10,10,20,20);

// cut the drawn rectangle
var image = context.getImageData(10,10,50,20); 
// copy into visual canvas at different position
ctx.drawImage(offscreenCanvas, 0, 0);