HTML5 CANVAS:IMAGES AND DRAWINGS
Part 2
Draw Shapes and Text on Canvas
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 1
In this lecture, you will learn:
how to write JavaScript to do the following on a canvas element• draw shapes
• draw text
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 2
Shapes
• rectangles
• lines
• circles and arcs
• curves
• irregular shapes
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 3
Rectangles
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 4
Reminder
<!DOCTYPE html>
<html>
<head>
<title>Canvas Example</title>
</head>
<body>
<canvas id="gameCanvas" width="1136" height="640">
Your browser does not support canvas.
</canvas>
<script>
</script>
</body>
</html>
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 5
We will add JavaScript here to add a
rectangle to the canvas element.
Add a filled rectangle on Canvas Element<canvas id="gameCanvas" width="1136" height="640">
Your browser does not support canvas.
</canvas>
<script>
var myCanvas =
document.getElementById("gameCanvas");
var myContext = myCanvas.getContext("2d");
myContext.fillStyle = "#FF0000";
myContext.fillRect(250, 70, 120, 40);
</script>© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 6
Set a color first. In this example, it's red.
Lines
Use the following methods in combination:
• context.moveTo(x, y);
• context.lineTo(x, y);
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 7
How to use combination of moveTo() and lineTo()
• Think of using a pencil to draw a shape on paper
• moveTo() command is like moving the pencil to a location with the pencil up
• lineTo() command is like putting the pencil down on the paper and moving it to a location
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 8
Say this is the canvas area with
width=1136 and height=640
(0, 0)
(1136, 640)© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 9
myContext.moveTo(376, 53);
myContext.lineTo(295, 246);
myContext.lineTo(451, 239);
myContext.lineTo(376, 53);
myContext.moveTo(372, 227);
myContext.lineTo(372, 300);
myContext.stroke();
(376, 53)
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 10
myContext.moveTo(376, 53);
myContext.lineTo(295, 246);
myContext.lineTo(451, 239);
myContext.lineTo(376, 53);
myContext.moveTo(372, 227);
myContext.lineTo(372, 300);
myContext.stroke();
(295, 246)
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 11
myContext.moveTo(376, 53);
myContext.lineTo(295, 246);
myContext.lineTo(451, 239);
myContext.lineTo(376, 53);
myContext.moveTo(372, 227);
myContext.lineTo(372, 300);
myContext.stroke();
(451, 239)
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 12
myContext.moveTo(376, 53);
myContext.lineTo(295, 246);
myContext.lineTo(451, 239);
myContext.lineTo(376, 53);
myContext.moveTo(372, 227);
myContext.lineTo(372, 300);
myContext.stroke();
(376, 53)
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 13
myContext.moveTo(376, 53);
myContext.lineTo(295, 246);
myContext.lineTo(451, 239);
myContext.lineTo(376, 53);
myContext.moveTo(372, 227);
myContext.lineTo(372, 300);
myContext.stroke();
(372, 227)
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 14
myContext.moveTo(376, 53);
myContext.lineTo(295, 246);
myContext.lineTo(451, 239);
myContext.lineTo(376, 53);
myContext.moveTo(372, 227);
myContext.lineTo(372, 300);
myContext.stroke();
(372, 300)
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 15
myContext.moveTo(376, 53);
myContext.lineTo(295, 246);
myContext.lineTo(451, 239);
myContext.lineTo(376, 53);
myContext.moveTo(372, 227);
myContext.lineTo(372, 300);
myContext.stroke();© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 16
Path and Stroke
• Path: • made up of one or more straight and/or curve segments
• invisible until applying stroke
• to start a path, use beginPath()
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 17
Circles and Arcs
context.arc(x, y, radius, startAngle,
endAngle, counterClockwise);
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 18
Circles and Arcs
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 19
myContext.arc(270, 190, 30, 0, Math.PI*2);
myContext.arc(470, 190, 30, 0, Math.PI*2);
myContext.arc(370, 250, 230, Math.PI*0.1, Math.PI*0.9);
Curves
• Bezier curve• start point, end point
• 2 control points in-between
• Quadratic curve• start point, end point
• 1 control point in-between
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 20
Bezier Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 21
Bezier Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 22
Bezier Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 23
myContext.moveTo(45, 111);
myContext.bezierCurveTo(86, 311, 290, 310, 328, 110);
myContext.stroke();
start point
Bezier Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 24
myContext.moveTo(45, 111);
myContext.bezierCurveTo(86, 311, 290, 310, 328, 110);
myContext.stroke();
end point2 control points
Quadratic Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 25
Quadratic Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 26
Quadratic Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 27
myContext.moveTo(68, 116);
myContext.quadraticCurveTo(127, 327, 309, 312);
myContext.stroke();
start point
Quadratic Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 28
myContext.moveTo(68, 116);
myContext.quadraticCurveTo(127, 327, 309, 312);
myContext.stroke();
end pointcontrol point
Complex Shapes Using Combination of Lines and Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 29
Complex Shapes Using Combination of Lines and Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 30
Irregular Shapes Using Combination of Lines and Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 31
quadratic curve
quadratic curve
bezier curve
bezier curve bezier curve
bezier curve
bezier curve
lines
Adobe Illustrator To JavaScript
• Plug-ins:• Drawscript (http://drawscri.pt/)
• Ai→Canvas (http://visitmix.com/labs/ai2canvas/).
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 32
Example:Vector Graphics Created in Adobe Illustrator and Converted to JavaScript to Draw on Canvas
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 33
Draw Text on Canvas
context.fillText(textString, x,
y);
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 34
Example
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 35
myContext.font = "60px Arial";
myContext.fillText("Welcome!", 200, 100);
200
100