Draw canvas

[00:00 - 01:46] All right, moving right along, we're on our third step, which is drawing the canvas. This is going to be exactly the same as the last two charts we drew, so maybe it'll be a good idea for you to pause the video and try to write this code on your own, and then come back and make sure that your code matches my code. All right, so hopefully you did that, and let's go ahead and write this code together. So first we want to draw our wrapper, and if you remember we have this wrapper, this div with an ID of wrapper in our index.html file, so all we need to do is to grab it by using hash wrapper, because it's an ID, and then we want to append an SVG element, and give it a height and a width. So the width is going to be to mentions that width, and then same thing for the height. Pretty straightforward, and then we're also going to create our bounds so that inner container. So our bounds is wrapper, and we're going to append a group element. This is mostly for organizational purposes, and then we're just going to spell style correctly, and also move that to transform down and to the right, so it respects our top and left margins. So this is going to be an ESX template string.

[01:47 - 02:23] So we're going to translate. So this is going to be the horizontal shift, so we want to move it over by our left margin. So dimensions.margin.left, and because this is a CSS style, we need to give it units, and then now we want to specify how far down we want it to go. So dimensions.margin.top, and that's also going to be in pixels.