HTML 5
<canvas>
by Daniil Suleiman
<canvas> can:
- Draw Graphics
- Draw Text
- Can be Animated
- Can be Interactive
- Can be used in Games
Draw on the Canvas With JavaScript
<script>
var canvas
...
</script>getContext()
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
...
...
</script><body>
<canvas id="line"></canvas>
<script>
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.moveTo(0, 0);
ctx.strokeStyle = 'purple';
ctx.lineTo(300, 150);
ctx.stroke();
</script>
x
y
0
- moveTo(x, y)
- lineTo(x, y)
- stroke()
Lines
Line Properties
- lineCap
- lineJoin
- lineWidth
butt
round
square
1px
12px
var rectangle = document.getElementById('rectangle');
var ctx = rectangle.getContext('2d');
ctx.strokeStyle = 'green';
ctx.strokeRect(100, 25, 100, 100);Rectangles
var rectangle = document.getElementById('rectangle');
var ctx = rectangle.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(100, 25, 100, 100);- fillRect(x,y,width,height)
- strokeRect(x,y,width,height)
var circle = document.getElementById("circle");
var ctx = circle.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.arc(150, 75, 60, 0, 2*Math.PI);
ctx.stroke();- beginPath()
- arc(x,y,radius, startAngle, endAngle)
Circles and arcs
0
Pi
0.5Pi
1.5Pi
for( ; ; ) +
canvas methods (beginPath(), moveTo(), lineTo(), fill() and else)
+ some MAGIC..
- quadraticCurveTo(cpx,cpy,x,y)
Curves
- bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
for( ; ; ) +
bezierCurveTo()
+ no MAGIC..
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var grd=ctx.createRadialGradient(100,100,100,100,100,0);
grd.addColorStop(0,"white");
grd.addColorStop(1,"blue");
ctx.fillStyle = grd;
ctx.fillRect(0,0,200,200);
</script>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var grd=ctx.createLinearGradient(0,0,250,0);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,250,150);
</script> Canvas - Gradients
- createLinearGradient()
- createRadialGradient()
That's what I've got
Canvas Animations
-
clear the canvas
-
save the canvas state
- draw animated shapes
- restore the canvas state
Animation steps
(clearRect())
- setInterval()
- setTimeout()
- requestAnimationFrame()
Scheduled updates
The Svisloch' river?!?!
Drawing Text on the Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.font = "90px Arial";
ctx.fillText("EPAM",50,100);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.font = "90px Arial";
ctx.strokeText("EPAM",50,100);- fillText(text,x,y)
- strokeText(text,x,y)
HTML 5
<canvas>
by Daniil Suleiman
HTML Canvas
By Daniel Suleiman
