16 - The HTML Canvas 🖼️

Add a Canvas and Buttons

The <canvas> tag places a rectangular region that responds to drawing requests. It does not contain the drawing tools, it is merely a display window.

• Give the canvas a unique identifier like "display" or even just "canvas" and size it in the HTML tag:
  <canvas id="display" width="640px" height="400px"></canvas>

• For now, we will only give the canvas a border:

  • In your style file, add a canvas definition and add a border of your choosing: 
    canvas {
      border: 1px solid black;
    }

  • Note:  if you set the width or height using CSS it will stretch the image!

Add four buttons inside a <div>

• Create a <div> under your canvas

• Inside the div, add 4 buttons:  "Add Square"  "Add Circle"   "Add Image"  and  "Clear"

  • make sure they have unique identifiers!

• The goal is to have these buttons place a random square (or rectangle), circle, and image on the canvas

• Feel free to add a margin to the button tag in your style file (I recommend 10px)

Setup the Script File   📝

Now let's move to the meat of the project - the script (remember, HTML is not a programming language)!

• Put a header in your script file

  • The header should include (at the very least) the date of the last edit and your name.

    • It is best practice to include your email address and a brief description of the script file (not the entire program - you might have more than one script file)

• Add 'use strict'; as your first line of true code

• Add a "click" event listener to each button to call similarly named functions "add_square", "add_circle", etc...

  • Add the skeleton functions to your code!

• Add the randInt() function to your script:
  function randInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

You're Ready to Paint!  🎨🖼️

Well, not quite... 

As I said, the canvas element is just a display port for the drawings that you do in JavaScript. In order to draw or manipulate the image shown on the canvas, you need to use the "context" object. Don't worry - it's easy!

const canvas = $("display");

const ctx = canvas.getContext("2d");

Then you use ctx. to draw:

ctx.fillStyle = "red";

ctx.fillRect(30, 45, 50, 50);

Your goal:

• The "Add Square" button should draw a randomly sized square (or rectangle) at a random location on the canvas.
  If you feel up to it, the fill and/or stroke colour could be random as well.

  • Hint:  the links above give good examples and references to using the rect(), fillRect(), and stroke() functions

• The "Add Circle" button should draw a randomly sized circle at a random location on the canvas.
  If you feel up to it, the fill and/or stroke colour could be random as well.

  • Hint:  the links above should be all you need to get this working!

• The "Add Image" button should draw your fun image at a random location on the canvas (sized appropriately - or randomly)

  • Hint:  your image needs to be loaded in memory first somehow... could you place it on the page in a hidden location, maybe?

• The "Clear" button should clear the entire canvas... can you think of how you might do that?

  • Hint:  the canvas is rectangular!