hello, canvas
DESCRIPTION
Gentle introduction to using HTML5 Canvas. Class slides for Year Up elective.TRANSCRIPT
Hello, Canvas.Hello, Canvas.
What is a canvas?
The <canvas> Element
<!doctype html>
<html>
<head>
<title>Canvas is awesome!</title>
</head>
<body>
<canvas width="500" height="500">
Sorry, your browser does not support canvas :(
</canvas>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Canvas is awesome!</title>
</head>
<body>
<canvas width="500" height="500">
Sorry, your browser does not support canvas :(
</canvas>
</body>
</html>
The <canvas> Element
JavaScript to the rescue!
<!doctype html>
<html>
<head>
<title>Canvas is awesome!</title>
</head>
<body>
<canvas width="500" height="500">
Sorry, your browser does not support canvas :(
</canvas>
<script src="script.js"></script>
</body>
</html>
JavaScript to the rescue!
// script.js
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 100, 100);
Learn more: https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas
0, 0x
y
x0, 0
y
3, 1
x0, 0
y
3, 1
2, 5
ctx.fillRect(5, 5, 3, 3);
start x coordinate
start y coordinate
width
height
x0, 0
y
ctx.fillRect(5, 5, 3, 3);
x0, 0
y
ctx.fillRect(5, 5, 3, 3);
5, 5
x0, 0
y
ctx.fillRect(5, 5, 3, 3);
5, 5
3
3
Getting fancy
ctx.fillStyle = 'red'; // Draw a red square
ctx.fillStyle = 'blue'; // Draw a blue square
ctx.fillStyle = '#8A1CDA'; // Draw a purple square
Code Sampleshttps://github.com/sethmcl/yearup_intro_to_programming/tree/master/hello_canvas/part_1
Resources
Use canvas to draw a picture like this in the browser.BONUS: Can you animate it?
Homework