JavaScript – Using a Canvas – Mr. Chastkavich's Website

Shape of the Day:

The Canvas Tag
Practicing with Canvas

Website of the Day:

http://craftymind.com/factory/html5video/CanvasVideo.html – Here the canvas tag is utilized to allow you to blow up the video! (If it doesn’t work right away, click on Return to Craftymind Article, find the video and click it again).

1. The Canvas Tag

Make sure you have the Canvas set up on your webpage using the following information from the JavaScript Methods post:
- This allows you to add animations and dynamic graphics to a webpage using HTML5 and JavaScript.
- Get ready to use the canvas tag by adding it to your webpage with an id of myCanvas. Use this ID in the style tag and use CSS to give it a width of 400px, a height of 200px and a solid black 1px border.
This is a container for graphics created by JavaScript (text, images, shapes, etc.) can be drawn, animated leading to games and animations!
Colin Cieloha from Skilled.co has the following to say about why Web Developers use the Canvas Tag:

- - “Canvas technology is amazing because it’s super easy to use. For example, Canvas can draw colorful text to help your message pop on the screen – and you can even animate it! HTML canvas objects can move, too, whether it’s just a few bouncing balls or an intricate animation that tells a story. For designers interested in gaming software, the canvas element is a brilliant choice for building characters, worlds, and then setting it all into motion.
  - Canvas isn’t magic (close, but not magic). You’ll still need a basic understanding of HTML and JavaScript to make these codes work for you the way you want, but the canvas element is simple and easy to use. The HTML canvas element’s purpose is to create graphics, according to lines of script, but it’s only a container. The canvas element draws paths, boxes, circles, text, and helps you to create images. It also provides the user with graphs and charts to order their graphic data designs. To draw graphics, canvas uses a JavaScript context object, which makes it easy and fast to create graphics in your design.”

2. Time to Practice with Canvas

- Now that you have a canvas on your most recent new webpage document, it’s time to figure out how to draw objects on the canvas.
- First add opening and closing script tags between the opening and closing canvas tags. This allows the script to work ON the Canvas of your webpage.
- Next you need to use the getElementById() method by adding
  - ```
  var canvas = document.getElementById("myCanvas");
```
- Time to draw on the canvas to test it out – to draw 2D objects you must add the variable:
  - ```
  var ctx = canvas.getContext("2d");
```
- Next you will draw a rectangle – start by adding a colour
  - ```
  ctx.fillStyle = "#FF0000";
```
  - (the fillStyle property can be a colour, gradient, or pattern – the default colour is black)

- To actually create the rectangle, lastly you need the following code
  - ```
  ctx.fillRect(x,y,width,height);
```
- How would you make the rectangle the same size as the canvas area?
- Change the size of the rectangle to 200 width and 150 height and move the location to 10 in the x direction and 50 in the y direction.
- Now it’s time to add a line to the canvas area by adding the following:
  - This defines where the line starts
    - ```
    ctx.moveTo(40,50);
```
- This defines where the line ends
  - ```
  ctx.lineTo(80,150);
```
  - This draws the line
    - ```
    ctx.stroke();
```
- You can add/change some other properties such as the width
  - ```
  ctx.lineWidth = 10;
```
- Or the style of the line (round, square or butt)
  - ```
  ctx.lineCap = "round";
```
- Or the colour of the line
  - ```
  ctx.strokeStyle = "red";
```
- *** The above three properties must be before the ctx.stroke(); line.
- Lastly, if you want to draw another separate line, use the following code and then add whatever you like to it similar to above:
  - ```
  ctx.beginPath();
```
- Your code above will affect whatever is below, so with beginPath you can change it to whatever you like.
- Time to draw a Circle! Use the following code:
  - ```
  ctx.beginPath();
```
- ```
ctx.strokeStyle = "green";
```
  - ```
  ctx.arc(190,75,35,0,2*Math.PI);
```
- ```
ctx.stroke();
```
- Now that you have a lot of code on your page, let’s organize it with some comments to help you label which code has drawn which shape, in case you want to go back and change parts of it – this really helps web developers communicate and understand what you need to change and where it has to be changed.
  - //this would be a comment on a single line
- Lastly, try to add some text to your canvas:
  - ```
  ctx.fillStyle = "purple";
```
- ```
ctx.font = "30px Arial";
```
  - ```
  ctx.fillText("Hello World", 40, 50);
```
- Now that you know how to draw some lines and a circle, draw a stick man and name him Mr. Chastkavich!