Drawing On your Browser Using Javascript🎨

Drawing On your Browser Using Javascript🎨

Magic Of Canvas : First Path

KucingKode's photo
KucingKode
·

5 min read

😁Welcome

Welcome to the Magic Of Canvas, I am Fazle and on this adventure we will learn how to draw many thing on your browser with HTML Canvas API😎. In this adventure i will use a web app called PLAYCODE on playcode.io, playcode is a javascript playground web app that will handle everything that we need to continue on this adventure.

🛠First

Before we can do anything, first we need create new playcode.io project by go to playcode.io/new or, you can just press this link that will redirect you to playcode.io new project. On playcode.io you will get this page

PLAYCODE view

Now you need to go to your script.js file, by clicking the index.html text on the top of the web page,

index.html text position

it will send you to your index.html file, now replace text in that index.html file with this code :

<canvas></canvas>

on code below, we create a HTML tag of HTML canvas element, HTML tag is written with syntax <element name>element inner HTML</element name>, it will create a new HTML element on the browser for us. congratulation, now you have been created your HTML canvas element to your page😀🎉

Now you need to go to your script.js file, by clicking script.js text on the top of your web page, it will send you to your script.js file.

now replace text in that index.html file with this code

const canvas = document.querySelector('canvas')
canvas.width = 400
canvas.height = 400
const c = canvas.getContext('2d')

Explanation:

  • on the first line we wanna get HTML canvas element to your script.js file, then put in inside a constant variable named "canvas", constant variable means the value of that variable cannot be changed👀

  • on the second and the third line we get canvas width and height property and set it in to 400 pixel🙄

  • on the last line, we wanna get that canvas rendering context 2d and put it inside a constant variable named "c", canvas 2d context is a part of canvas that provides the 2d drawing surface of canvas element, so now we have to variable named "canvas" and "c" and we can start drawing on that canvas❤🎉

🎨Start drawing

canvas's rendering context 2d has many methods and properties that we can use and access to draw many thing on our canvas element😍, like rectangle, circle, and many thing. But on this blog we will only learn how to draw rectangle, and give it color with fillStyle property and fill method👀

  • beginPath

beginPath method will tell canvas rendering context 2d that you wanna start a new drawing path, the syntax of beginPath is [canvas rendering context 2d].beginPath()

So you can add this code to your script.js to start a new path :


c.beginPath(10)

Explanation:

On code below, we access variable named "c" that we have created, then we access beginPath method of "c" variable that contains canvas rendering context 2d. The () symbol means you wanna run that method🙄

  • rect

rect is a method on canvas rendering context 2d that will draw a rectangle on your canvas, it need some parameters, parameter is an information that will used rect method to calculate where and how the rectangle will be drawn😎

So to draw a rectangle you can add this code to your script.js file :

c.rect(10, 10, 50, 50)

Explanation:

On code above, we access a variable named "c" that store our canvas element 2d context, then we access the "rect" method of our canvas rendering context 2d, and gives it some parameters. The first parameter give rect method information about the rectangle x position of the rectangle, then the second parameter is the information about y position of the rectange, the third parameter is the width of the rectangle, and the last parameter is the height of that rectangle, so you can read it as "draw a rectangle with x position of 10, x position of 10, width of 50, and height of 50"📃🙄

Remember❕, for canvas rendering context 2d, 0 x position is on the left of the canvas, and 0 y position is on the top of the canvas

So the format of the rect method is [canvas rendering context 2d].rect(x position, x position, width, height)

  • fillStyle and fill()

But now on the web view you still doesn't see anything, that because your rectangle has no color, to give it a color you can add this code to your script.js file :

c.fillStyle = "red"
c.fill()

Explanation:

  • On the first line of that code we access the fillStyle property of canvas rendering context 2d, fillStyle contains information about how canvas rendering context 2d will fill an object on the canvas. So on that code we access it and give it value red, in javascript you need to surround a text with double quotes("), single quote('), or backtick(`). So we write it as "red" or 'red' or `red` 😁

  • On the second line we say to canvas rendering context 2d to fill all object on the canvas path with the fillStyle property👍

✔What we get

So now with this javascript code that we write in our script.js file😀 :

const canvas = document.querySelector('canvas')
canvas.width = 400
canvas.height = 400
const c = canvas.getContext('2d')

c.beginPath()
c.rect(10, 10, 50, 50)
c.fillStyle = 'black'
c.fill()

you will have this on your browser page or on your browser preview😀 :

Result

There is still so many thing that you can try to draw on your canvas, so maybe you can try how to make 2 rectangle on your canvas element🤔. If you wanna know more about canvas rendering context 2d you can go to MDN Web Docs about CanvasRenderingContext2D📃

Thanks for join this adventure, i hope you get something from it🐱‍👤

HTML CanvasJavaScriptHTML5