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>

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.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