HTML5 Canvas 2D Drawing

Matt Toegel matthew.toegel@njit.edu

Objective

  • Learn about the <canvas> element

  • Utilize 2d context to draw text/shapes

  • Leverage vanilla JavaScript to draw, animate, and respond to user input

  • Review practical examples

  • Apply concepts to simple 2D browser games

  • Finale: Chicken Vs. Zombie

The Canvas

  • At face value it’s just an empty element, like a <div> or a <span>

  • You can include content inside of the tag that’ll render if the browser lacks Canvas support

  • The magic of it comes from the Canvas API

  • Default size is 300x150 pixels

  • Supported in all major/modern browsers (basically > IE for the most part)

Context

  • JavaScript interacts with the <canvas> by getting a reference

    • document.getElementById("canvasId") for example

  • From that reference we get the context

    • element.getContext('2d')

    • Canvas supports both 2d and 3d (webgl) but the latter is more complex with vanilla JavaScript

  • With the context reference the Canvas API will be used

Context Eample

<cancas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
</script>

  • Note: It’s best to check if canvas was found and if the browser supports getContext rather than just assuming

Drawing

  • 2D context is very simple; Uses

    • Lines

    • Stroke/Fill

    • Rects

    • Arcs

    • Paths/Curves

    • Images

  • Coordinate system is (0,0) top-left (inf,inf) bottom right

    • -x is left, +x is right

    • -y is up, +y is down

canvas default grid

More examples/reference: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

Lines

  • Use lineTo(x,y) to draw a line from the current position to the destination x,y

    • The start point depends on previously drawn paths or moveTo(x,y)

  • moveTo(x,y) moves the "pen" to the x,y coordinate

  • These are usually used in conjunction with beginPath() and stroke()

  • beginPath() starts a new path (group of lines, shapes, curves)

  • Likewise, there’s a closePath(), adds a straight line from the current point to the first path coordinate

  • stroke() applies outline

  • fill() fills a shape’s or path’s area

    • Stroke is used for individual line segmenets

Path methods https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#paths Lines: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#lines

Lines Example

Rectangles

  • Rectangles are drawn from top-left to bottom-right

  • The x,y refers to a corner rather than the center

  • fillRect(x, y, width, height) draws a filled rectanlge starting at the top-left point extended the width and height (all in pixels)

  • strokeRect(x, y, width, height) does the same except as an outline

  • clearRect(x, y, width, height) clears an area making it transparent

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#drawing_rectangles

Rectangle Example

Arcs

  • Arcs (and circles) are centered at x, y

  • arc(x, y, radius, startAngle, endAngle, counterclockwise) draws an arc centered at x,y with a given radius; angles are in radians

    • radians = (Math.PI/180)*degrees

  • arcTo(x1, y1, x2, y2, radius) draws an arc with control points

  • stroke() and fill() can be used for arcs

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#arcs

Arc Example

ArcTo Example

Text

  • Text can be rendered to a Canvas

  • You’ll have to take care on how it is written/wrapped/etc

  • fillText(text, x, y, maxWidth [optional]) fills the text string at the coordinate (top-left of the bounding box); optionally uses maxWidth to handle scaling/kerning

    • This displays text as you’d normally expect to see it

  • strokeText(text, x, y, maxWidth [optional]) outlines the text string at the coordinate (top-left of the bounding box); optionally uses maxWidth to handle scaling/kerning

  • Can be styled

    • font changes font family and some style (default is 10px sans-serif )

    • textAlign changes alignment (start, end, left, right, center) (default is start)

    • textBaseline baseline alignment (top, hanging, middle, alphabetic, ideographic, bottom) (default is alphabetic)

    • direction directionality (ltr, rtl, inherit) (default is inherit)

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text

Text Example

Images

  • There are a few ways to handle images, but I’ll keep this brief

  • An Image reference is required, for ease new Image() and setting a source will be used

  • There are also many effects that can be applied, but will just cover the basic draw method

  • drawImage(image, x, y) draws the image at the coordinate (top left)

  • drawImage(image, x, y, width, height) draws the image with scaling

  • drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) draws an image from source coord/area to destination coord/area (scales if size differs)

    • Maintains aspect ratio

    • Can be used with spritesheets for animation

  • Note: drawImage() is quite slower than the other shape methods

Image Example

Animations

  • What is an animation really?

Answer

  • Animations are basically separate frames that are drawn sequentionally; fast enough to trick our eyes/brain into seeing movement

    • Generally this is 24 FPS or higher for "smooth" animation

Usage

  • There are primarily two ways to do animation

    • setInterval() to run a function at a set tick rate

    • requestAnimationFrame() browser controlled animation tick rate (typically display refresh rate)

      • Uses a timestamp to calculate time delta between frames for frame rate independent animation

  • Essentially we want a loop to do the following

    • Update state

    • Clear viewport

    • draw current state

SetInterval Example

AnimationFrame Example

  • Uses frame time delta for decoupled animation

Making it fun

  • Let’s tie in user input along with our drawing and animation topics

Catch

  • Use left/right or a/d to move a paddle to catch falling objects

Shmup

  • Use left/right or a/d to move player to avoid falling objects

  • Use space to shoot

Finale

What else can we do?

  • To further extend our capabilities

    • Canvas API supports controllers and joysticks

    • WebSockets can provide multiplayer capabilities

    • Database services/platforms can be used to save/load game state, player state, etc

    • Use a PWA web app or similar you can deploy your Canvas program to multiple devices like consoles