Scribd
Upload
8 views24 pages

02 WPI Canvas Fundamentals

Canvas is a medium for oil painting and also refers to the HTML <canvas> element used for drawing graphics on web pages. The document provides examples of using JavaScript to draw shapes, text, gradients, and images on an HTML canvas. It covers basic methods for creating and manipulating graphics within a defined canvas area.

Uploaded by

وسام عوكل
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views24 pages

02 WPI Canvas Fundamentals

Canvas is a medium for oil painting and also refers to the HTML <canvas> element used for drawing graphics on web pages. The document provides examples of using JavaScript to draw shapes, text, gradients, and images on an HTML canvas. It covers basic methods for creating and manipulating graphics within a defined canvas area.

Uploaded by

وسام عوكل
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

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 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(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 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</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 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</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 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("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 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("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 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
Draw Gradient
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(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 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
Draw Circular Gradient
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.arc(50, 50, 50, 0, 2*Math.PI);
ctx.fillStyle = grd;
ctx.fill();
</script>
</body>
Draw Circular Gradient
Draw Image
<body>
<p>Image to use:</p>
<img id=“myImage" src="canvas.jpg" 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 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("myImage");
ctx.drawImage(img,10,10);
}
</script>
</body>
Draw Image

You might also like