HTML5 CANVAS: IMAGES AND DRAWINGS
Transcript of HTML5 CANVAS: IMAGES AND DRAWINGS
![Page 1: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/1.jpg)
HTML5 CANVAS:IMAGES AND DRAWINGS
Part 2
Draw Shapes and Text on Canvas
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 1
![Page 2: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/2.jpg)
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
![Page 3: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/3.jpg)
Shapes
• rectangles
• lines
• circles and arcs
• curves
• irregular shapes
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 3
![Page 4: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/4.jpg)
Rectangles
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 4
![Page 5: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/5.jpg)
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.
![Page 6: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/6.jpg)
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.
![Page 7: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/7.jpg)
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
![Page 8: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/8.jpg)
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
![Page 9: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/9.jpg)
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
![Page 10: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/10.jpg)
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
![Page 11: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/11.jpg)
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
![Page 12: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/12.jpg)
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
![Page 13: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/13.jpg)
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
![Page 14: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/14.jpg)
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
![Page 15: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/15.jpg)
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
![Page 16: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/16.jpg)
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
![Page 17: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/17.jpg)
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
![Page 18: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/18.jpg)
Circles and Arcs
context.arc(x, y, radius, startAngle,
endAngle, counterClockwise);
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 18
![Page 19: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/19.jpg)
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);
![Page 20: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/20.jpg)
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
![Page 21: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/21.jpg)
Bezier Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 21
![Page 22: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/22.jpg)
Bezier Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 22
![Page 23: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/23.jpg)
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
![Page 24: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/24.jpg)
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
![Page 25: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/25.jpg)
Quadratic Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 25
![Page 26: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/26.jpg)
Quadratic Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 26
![Page 27: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/27.jpg)
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
![Page 28: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/28.jpg)
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
![Page 29: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/29.jpg)
Complex Shapes Using Combination of Lines and Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 29
![Page 30: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/30.jpg)
Complex Shapes Using Combination of Lines and Curves
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 30
![Page 31: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/31.jpg)
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
![Page 32: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/32.jpg)
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
![Page 33: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/33.jpg)
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
![Page 34: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/34.jpg)
Draw Text on Canvas
context.fillText(textString, x,
y);
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 34
![Page 35: HTML5 CANVAS: IMAGES AND DRAWINGS](https://reader030.fdocuments.us/reader030/viewer/2022012709/61a938458e2f1b6b836a4dce/html5/thumbnails/35.jpg)
Example
© 2016 Pearson Education, Inc., Hoboken, NJ. All
rights reserved. 35
myContext.font = "60px Arial";
myContext.fillText("Welcome!", 200, 100);
200
100