Home » IGM Presentation » Demo

The App Demo “Hintorium” is located below the Lesson Plan

Learning HTML5 Canvas

The HTML <canvas> element is a powerful, scriptable container for drawing graphics. It allows you to render 2D shapes, images, and animations dynamically using JavaScript. In this lesson, you’ll learn the basics of setting up a canvas, drawing simple shapes, and experimenting with canvas methods.

1. Setting Up the Canvas

To use the canvas, include it in your HTML with a specified width and height. For example:

HTML
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #ccc;"></canvas>

Then, in JavaScript, obtain the drawing context:

JavaScript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

2. Drawing a Rectangle

One of the simplest methods is to draw a filled rectangle. Here’s an example that sets the fill color to blue and draws a rectangle:

JavaScript
ctx.fillStyle = 'blue';       // Set fill color to blue
ctx.fillRect(50, 50, 150, 100); // Draw rectangle at (50,50) with width 150 and height 100

3. Drawing a Circle

To draw a circle, you begin a new path, use the arc() method, and then fill or stroke the path. For example:

JavaScript
ctx.beginPath();                          // Start a new path
ctx.arc(250, 200, 50, 0, 2 * Math.PI);      // Draw a circle with center (250,200) and radius 50
ctx.fillStyle = 'orange';                   // Set fill color to orange
ctx.fill();                               // Fill the circle
ctx.closePath();                          // Close the path (optional)

4. Summary

  • The <canvas> element creates a blank drawing area in your webpage.
  • The drawing context (getContext('2d')) provides methods to draw shapes, text, and images.
  • Basic methods include fillRect() for rectangles and arc() for circles.
  • You can style your drawings using properties like fillStyle and strokeStyle.

For this demo, you’ll use the interactive code playground below to experiment with these concepts in real time. Try modifying the examples above to see how the canvas responds. Have fun learning and don’t hesitate to tinker!

Please be patient while we load the feedback; it will appear in the feedback section below.

Hintorium Exercise – HTML Canvas

In this assignment, you’ll work with the HTML Canvas API to bring your drawings to life! A basic example is already provided that draws a blue square on the canvas.

Press the “Run Code” button to see the result of your code, and the “Get AI Feedback” button for help underneath the code editor.

What You’ll Learn:

  • Canvas Setup: How to set up and access the canvas element in your HTML.
  • Drawing Shapes: How to use various methods to create circles and squares.
  • Styling Your Drawing: How to change fill colors and experiment with drawing paths.
  • Order of Operations: The importance of starting and closing paths when drawing shapes.

Task: Using the HTML canvas API, a blue square is already drawn. You must add code to draw an orange circle using proper canvas methods

JavaScript:

Enter your solution in the editor below.

Preview:

Press the “Run Code” button below the editor.

Feedback:

Feedback will appear here after you click “Get AI Feedback.”

Experimental Features

Below you will find some experimental features that would normally be hidden. You can use this to create a sandbox/choose your own adventure and experiment with the Hintorium Code Playground.

This area allows an instructor to influence the grading of the student’s solution. In plain English you can describe what aspects should be graded strictly, what may be lenient, and any other hints you’d like to provide. For example, you might note that the exact circle coordinates don’t matter as long as a circle is drawn.

< Back to Presentation Homepage

To Learn more about the Projects and things I have worked on please visit the skills explorer on the homepage!