From the course: Vanilla JavaScript: Animations
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Drawing within the canvas context - JavaScript Tutorial
From the course: Vanilla JavaScript: Animations
Drawing within the canvas context
- When working with Canvas, there are a number of context modes that we can use to draw content. The primary context are 2D, for simpler 2D drawings and animations, and WebGL, which is much more complicated since we're dealing with a 3D surface. We'll set up our canvas element with a 2D drawing context. So, right below our canvas definition, I'm gonna paste in some snippets from our snippets file. The first thing we're doing here is defining the variable named context. So, this is gathered from the canvas variable that we created here, this reference to the actual animated-canvas element in our HTML, and here we say, canvas.getContext, and here's where we specify whether we want to use 2D or WebGL, and we pass in a string of 2d. We now have that context available for us to draw within, here I create a new function called drawCircle, and I employ different methods of the context we just created. So we start out by defining a fillStyle, and we set that equal to crimson. We then inform…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.