CANVAS
F u n d a m e n t a l s
By
Raed
What is Canvas?
Canvas is a medium for oil painting. One of the earliest oils on canvas is a French Madonna from
1410. Canvas is typically stretched across a wooden frame.
On the HTML canvas, you can draw all kinds of graphics, from simple lines, to complex graphic
objects.
The HTML <canvas> Element
The HTML <canvas> element (introduced in HTML5) is a container for canvas graphics.
An HTML canvas is a rectangular area on an HTML page.
Canvas has several methods for drawing paths, boxes, circles, text, and graphic images.
Basic Canvas Example
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
Basic Canvas Example
Drawing with JavaScript
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link] = "#FF0000";
[Link](0,0,150,75);
</script>
</body>
Drawing with JavaScript
Draw a Line
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link](0,0);
[Link](200,100);
[Link]();
</script>
</body>
Draw a Line
Draw a Circle
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link]();
[Link](95,50,40,0,2*[Link]);
[Link]();
</script>
</body>
Draw a Circle
Draw a Text
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link] = "30px Arial";
[Link]("Hello World",10,50);
</script>
</body>
Draw a Text
Stroke Text
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link] = "30px Arial";
[Link]("Hello World",10,50);
</script>
</body>
Stroke Text
Draw Gradient
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
Draw Gradient
// Create gradient
var grd = [Link](0,0,200,0);
[Link](0,"red");
[Link](1,"white");
// Fill with gradient
[Link] = grd;
[Link](10,10,150,80);
</script>
</body>
Draw Gradient
Draw Circular Gradient
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
Draw Circular Gradient
// Create gradient
var grd = [Link](75,50,5,90,60,100);
[Link](0,"red");
[Link](1,"white");
// Fill with gradient
[Link](50, 50, 50, 0, 2*[Link]);
[Link] = grd;
[Link]();
</script>
</body>
Draw Circular Gradient
Draw Image
<body>
<p>Image to use:</p>
<img id=“myImage" src="[Link]" alt=" myImage " width="220"
height="277">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid
#d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
Draw Image
<script>
function myCanvas() {
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
var img = [Link]("myImage");
[Link](img,10,10);
}
</script>
</body>
Draw Image
