HTML5 Canvas

by tabalinas

HTML

<canvas id="canvas" width="500px" height="500px"></canvas>

JavaScript

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

ctx.fillStyle = "lightblue";
ctx.fillRect(10, 10, 100, 100);
ctx.clearRect(30, 30, 60, 60);
ctx.strokeStyle = "lightgray";
ctx.strokeRect(40, 40, 40, 40);

ctx.beginPath();
ctx.lineTo(10, 10);
ctx.lineTo(110, 10);
ctx.lineTo(110, 110);
ctx.lineTo(10, 110);
ctx.lineTo(10, 10);
ctx.stroke();

//ctx.closePath
//ctx.moveTo
//ctx.fill
//ctx.arc
//ctx.roundedRect
//ctx.quadraticCurveTo

//ctx.drawImage

//var lingrad = ctx.createLinearGradient(0,0,0,150);
//lingrad.addColorStop(0, '#A7D30C');

//var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
//radgrad.addColorStop(0, '#A7D30C');

//var ptrn = ctx.createPattern(img,'repeat');
//ctx.fillStyle = ptrn;
//ctx.fillRect(0,0,150,150);

//ctx.shadowOffsetX = 2;
//ctx.shadowOffsetY = 2;
//ctx.shadowBlur = 2;
//ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
//ctx.font = "20px Times New Roman";
//ctx.fillStyle = "Black";
//ctx.fillText("Sample String", 5, 30);