![]() We’ll talk more about security in a future article, for now, let’s get to drawing stuff. The semicolon is there in case some other code is loaded before ours and it doesn’t have a semicolon at the end. This has several benefits such as preventing players (if this were a game) from accessing your variables directly and prevents your code from colliding with someone else's code (such as a library or another script on the website). We use it to prevent our code from leaking out in the global scope. This is an immediately invoked function expression (IIFE). If you were working with 3D, you would use WebGL instead.īut wait what’s with the function thingy wrapping all of this? The 2D context contains the set of tools we want. ![]() Once it finds the element, we can then manipulate it with JavaScript.Ĭanvas.getContext() - context is our toolbox of paintbrushes and shapes. Grab the canvas element and create a 2D contextĭocument.getElementById('gameCanvas') - searches for an HTML element that has the id of gameCanvas. Steps 3 and 4 Get the canvas element by id, then use it to get the “2d” context. I also changed the canvas background to be white and added some margin to the bottom. For this project, I will change the canvas width/height to be 800x1200 to give us plenty of space. Steps 1 and 2 for this project Our boilerplate / CodePen template already covered setting up the basic styles and adding a canvas element. We’ll do steps one and two in HTML/CSS, but you could do it in JavaScript if you prefer. Use the canvas element to get the context (your toolbox more on it later).In JavaScript, get your canvas element by using the id.Add base styles - center the canvas, add a background color, etc (CSS).Create the canvas element - give it an id, and a width/height (HTML).When working with a canvas there are five steps to get started. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |