- Fork this repository and clone onto your computer 💾
- Open
index.html
in your favourite web browser 🌐 - Open
art.js
in your favourite text editor (Atom, VS Code and Brackets are all great) 📄 - Try and get familiar with the code and read through the instructions below, while you wait for everyone else to finish the first 3 steps 😎
- When you're finished, if you're comfortable, send a link to your art repository and it will be added to our app! 👩🎨
In HTML, the canvas element is created by the following:
<canvas id="canvas"></canvas>
In our javascript file, we can then get our canvas element using document.getElementById()
.
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
You'll notice above that we have a second line that gets a context
object from our canvas. We can use that object to manipulate our canvas and draw to it.
Set the fill colour
ctx.fillStyle = 'green';
// 'green' can be any valid css colour such as:
// #0099FF, rgb(30, 200, 250), hsl(40, 50%, 100%)
Set the stroke colour
ctx.strokeStyle = 'rebeccapurple';
// The stroke style can also be any valid CSS colour
Change the stroke style
// Change the stroke width
ctx.lineWidth = 1.0;
// Change the style of line endings
ctx.lineCap = 'butt'; // butt (default), round, square
// Change the style of line corners
ctx.lineJoin = 'round'; // round, bevel, miter (default)
Draw a rectangle
// Fill a rectangle with the current fill colour
ctx.fillRect(x, y, width, height);
// Outline a rectangle using the current stroke colour
ctx.strokeRect(x, y, width, height);
Draw a circle
ctx.beginPath();
ctx.arc(x, y, diameter/2, 0, 2 * Math.PI, false);
ctx.fill();
// Don't forget to change the x, y, and diameter to the desired values
🚨 Check out the MDN canvas reference for a full list of operations you can use with canvas.