HTML5 - Canvas Demo
Please read my article that describes various canvas objects and their usage
http://hetalparikh.blogspot.com/2016/03/html5-canvas.html
I created an HTML page with a simple canvas used to draw objects as described below. Note that I have included a seperate javascript file which does the work of drawing the canvas.
An event listener is added that loads the javascript on page load to draw the canvas.
HTML Source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="script.js"></script>
<title>Demo HTML5 Canvas</title>
</head>
<body>
<section id="CanvasSection">
<canvas id="canvas" width="500" height="300"></canvas>
</section>
</body>
</html>
script.js source code
Demo 1: Draw Rectangle
function initiate()
{
var elem = document.getElementById('canvas');
var canvas = elem.getContext('2d');
canvas.beginPath();
canvas.moveTo(200, 200);
canvas.lineTo(200, 100);
canvas.lineTo(400, 200);
canvas.closePath();
/*Rectangle Demo*/
canvas.fillStyle = "#0000ff"; /*fills main canvas blue*/
canvas.strokeStyle = "#ff0000";/*stroke/draws canvas red*/
canvas.strokeRect(100, 100, 120, 120);/*draws main rectangle*/
canvas.fillRect(110, 110, 100, 100);/*fills rectangle*/
canvas.clearRect(130, 130, 30, 30);/*fills rectangle with clear/white space*/
}
addEventListener("load", initiate);
Output
Demo 2: Draw triangle
function initiate()
{
var elem = document.getElementById('canvas');
var canvas = elem.getContext('2d');
canvas.beginPath();
canvas.moveTo(200, 200);
canvas.lineTo(200, 100);
canvas.lineTo(400, 200);
canvas.closePath();
canvas.stroke();
}
addEventListener("load", initiate);
Output
Demo 3: Fill triangle with default solid
function initiate()
{
var elem = document.getElementById('canvas');
var canvas = elem.getContext('2d');
canvas.beginPath();
canvas.moveTo(200, 200);
canvas.lineTo(200, 100);
canvas.lineTo(400, 200);
canvas.closePath();
canvas.fill();
}
addEventListener("load", initiate);
Output
Demo 4: Clip Region
function initiate()
{
var elem = document.getElementById('canvas');
var canvas = elem.getContext('2d');
canvas.beginPath();
canvas.moveTo(200, 200);
canvas.lineTo(200, 100);
canvas.lineTo(400, 200);
canvas.closePath();
/*Clipping Demo*/
canvas.clip();
canvas.beginPath();
for (var i = 0; i < 400; i = i + 5)
{
canvas.moveTo(0, i);
canvas.lineTo(500, i);
}
canvas.stroke();
}
addEventListener("load", initiate);
Output
Demo 5: Gradient Rectangle Demo
function initiate()
{
var elem = document.getElementById('canvas');
var canvas = elem.getContext('2d');
canvas.beginPath();
canvas.moveTo(200, 200);
canvas.lineTo(200, 100);
canvas.lineTo(400, 200);
canvas.closePath();
/*Linear Gradient Rectangle Demo*/
var gradient = canvas.createLinearGradient(0, 0, 10, 100);
gradient.addColorStop(0.5,'#0088FF');
gradient.addColorStop(1,'#ff0000');
canvas.fillStyle = gradient;
canvas.fillRect(150, 10, 200, 100);
}
addEventListener("load", initiate);
Output
