Canvas simple samples

by corinnekm

HTML

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

JavaScript

// declare the two variables at once 
var canvas = document.getElementById("myCanvas"),
    context = canvas.getContext("2d");

// now you're ready to draw


// shapes
// x = 10, y = 20, width = 200, height = 100
context.fillStyle = 'blue';
context.fillRect(10, 20, 200, 100);
//
//line
context.lineWidth = 15;
context.lineCap = 'round';
//context.lineCap = 'butt';
//context.lineCap = 'square';
context.strokeStyle = 'black';
context.beginPath();
context.moveTo(10,20);
context.lineTo(210,120);
context.stroke();

//arc
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;

// line color
context.strokeStyle = 'red';
context.stroke();

var imageObj = new Image();

imageObj.onload = function() {
    context.drawImage(imageObj, 69, 250);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';