Post
Ask Question

How To Use HTML 5 Canvas

Get to know HTML5 Canvas for Graphics and Game Programming

Prior to the arrival of HTML5, games and other multimedia elements were served in browsers using Flash. Many Flash-based games can be played through a browser. Even Flash is also used to play videos. As far as I remember. without Flash Player, we couldn't play videos on Youtube. But everything changed after the arrival of HTML5.

HTML5 brings many new elements that replace Flash in the browser. One of them is the canvas.

What is Canvas?

In the real world, the canvas is often used for drawing and painting. Usually you use a pencil and paint.

In programming, a canvas is a code-drawable element.

Canvas is a new element in HTML5 for rendering graphics, images, and text.

How to Create a Canvas in HTML

Canvas can be created with tags <canvas>, don't forget to also provide the height and width measurements.

<canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;">
</canvas>

We give a little style style="border:1px solid #000000;" to create the edge. Next, we have to use the DOM API to manipulate the canvas, usually done like this,

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Function document.getElementById("myCanvas") to select HTML element by id myCanvas. Furthermore, the variable ctx(context) is an object from the canvas that we can use to draw. Full code example,

<!DOCTYPE html>
<html>
    <head>
        <meta charsetgoyang dombret="utf-8">
        <title>Tutorial HTML 5 Canvas</title>
    </head>
    <body>
        <canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;">
        </canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
        </script>
    </body>
</html>

Now we have a blank canvas ready to draw…

Prepare your imagination and start drawing with code.

Drawing on Canvas

If in the real world we use a pencil to draw, then in the HTML5 canvas we use an object ctx. Objects ctx we can think of like a pencil. This object has several methods for drawing on the canvas such as fillRect(), arc(), fillText(), etc. Now to draw with these methods, we must determine the coordinates of the point xand yits. Because the canvas consists of a collection of pixels that form an inverted Cartesian diagram.

How to Draw Points on Canvas

First, we will try to draw a point.

In fine art, a point is the smallest part of an object that occupies a space. Whereas in geometrical mathematics, a point is a 0dimensional object that has no length, width, and height.

But in computers, a dot is the size of 1 pixel of the screen.

To draw a point on the canvas, we can use the method fillRect() with a size of 1x1 pixels.

ctx.fillRect(x,y,1,1);

Variable xand ywe replace with the value of its coordinates, suppose we want to draw a point on the coordinates of (10,10).

ctx.fillRect(10,10,1,1);

Let's try it in code,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tutorial HTML 5 Canvas</title>
    </head>
    <body>
        <canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;">
        </canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            // gambar titik pada koordinat (10,10) dengan ukuran 1x1 px
            ctx.fillRect(10,10,1,1);
        </script>
    </body>
</html>


Similar Articles