• jollyyau

Week 9: Canvas

This week we learnt about making canvases in the html.


What is HTML Canvas?

A rectangular area on a webpage.

You can define the size of the canvas like this:

<canvas id="myCanvas" width="1920px" height="1080px"></canvas>

Remember to give it an id so you can reference it and also give it a size.

You also use javascript to draw on the canvas.

How to draw on the canvas?

  • Step 1: Grab the canvas element using DOM

  • var canvas = document.getElementById("myCanvas");

  • Step 2: Create an object to draw to the canvas. It's called a context.

  • var ctx = canvas.getContext("2d");

  • Step 3: Use coordinates to draw with code!

  • ctx.fillStyle = "#FF0000";

  • ctx.fillRect(0,0,150,75);

What is a Context canvas (step 2)?

The canvas 2D Context will give you some objects, methods and properties to draw and manipulate graphics on the canvas.

What can you do?

  • draw shapes

  • fill colours

  • create gradients

  • render text

  • copy images, video frames, and other canvases

  • manipulate pixels

It's a bitmap based API

It's like painting. You draw over something, and it will be covered up and can't be done.

Here are some examples:

This is an example I found online that creates a flowing Indian flag using canvas:


Recent Posts

See All

Week 11 + 12: Presentations II

These two weeks, we are presenting our web experiments that include the following: Map APIs Canvas Data Input It was very challenging for me, because I didn't know very much about coding at all. I sta

jollyyau.design © 2020

  • LinkedIn - White Circle
  • Facebook - White Circle
  • Instagram - White Circle