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.
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";
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?
copy images, video frames, and other canvases
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: