Web-Spinner - Learn: Canvas

Introduction

This is a beginner-friendly guide to using the 2D canvas in Web Spinner. The guide covers how to create graphics, animations, and interactive content.

Setup

You can create a Web Spinner project using either HTML or JavaScript. HTML is simpler but more limited. JavaScript allows for more opportunities with animation and interactivity. Let's begin with a blank canvas and look at both options.

HTML

See the Pen Web Spinner Learn HTML 01 by Caleb Foss (@calebfoss) on CodePen.

c2d stands for Canvas 2D, meaning a space to render two-dimensional imagery.

The canvas is an example of an element, a unit of content on a web page.

JavaScript

See the Pen Web Spinner Learn JS 01 by Caleb Foss (@calebfoss) on CodePen.

The lines in the code that begin with // are called comments. They are ignored by the browser and meant instead for humans to read. In this case, they describe what each line of code does.

Try changing the canvas settings.

You can swap the word pink with any named color or a hex value: . Make sure to keep the quotation marks around it.
You can change the height and width numbers to adjust the dimensions of the canvas.

Drawing Shapes

Start with One Shape

Let's put a shape on the canvas.

HTML

See the Pen Web Spinner Learn HTML 02 by Caleb Foss (@calebfoss) on CodePen.

JavaScript

See the Pen Web Spinner Learn JS 02 by Caleb Foss (@calebfoss) on CodePen.

Adding Another

How we add another shape changes its behavior. When a shape is added directly to the canvas, it starts with default settings. When a shape is added as a child of another shape, however, it starts with that shape's settings.

HTML

See the Pen Web Spinner Learn HTML 03-b by Caleb Foss (@calebfoss) on CodePen.

See the Pen Web Spinner Learn HTML 03-a by Caleb Foss (@calebfoss) on CodePen.

JavaScript

See the Pen Web Spinner Learn JS 02 by Caleb Foss (@calebfoss) on CodePen.

See the Pen Web Spinner Learn JS 03-a by Caleb Foss (@calebfoss) on CodePen.