<!DOCTYPE html> <html> <head> <meta name="description" content="HTML5 Canvas Graphics and Animation Video 1" /> <meta charset="utf-8"> <title>HTML5 Canvas Graphics and Animation</title> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> <script src="app.js"></script> </body> </html>
/** * Created by Answer1215 on 3/19/2015. */ window.onload = function() { //var canvas = $("#canvas")[0]; //var canvas = document.getElmenetByTagName("canvas")[0]; var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); canvas.width = 400; canvas.height = 700; //context.fillRect(10, 10, 100, 200); /**/ context.beginPath(); context.moveTo(100,100); //without draw any line; context.lineTo(300, 100); context.lineTo(300, 200); context.lineTo(100, 200); context.lineTo(100, 100); context.closePath(); context.stroke(); //context.fill(); //fill() will also close the path for you //so if you use fill(), you don't need closePath(); but in case you forgot //to close the path later, just remember to close it every times. /**/ /**/ context.rect(100,100,100,300); //make a rect and stroke it context.stroke(); context.fillRect(100,100,100,300); //fill rect context.strokeRect(100,100,100,300); //draw rect context.clearRect(100,100,100,300); //clean the canvas*/ };