The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Drawing Paths - Curves and Arcs

Drawing Paths - Curves and Arcs

5:16
When drawing on your HTML canvas in JavaScript, you aren't restricted to straight lines. Using curves and arcs you are able to create smooth curved lines.
Watch this lesson now
Avatar
egghead.io

When drawing on your HTML canvas in JavaScript, you aren't restricted to straight lines. Using curves and arcs you are able to create smooth curved lines.

Avatar
Kevin

For some reason; I was unable to get the canvas to look correctly on my retina screen without specifying the width, height attributes along with explicitly specifying the uniques in CSS as well--a convention I'm usually used to with my past experiences with Canvas.

I then do the following to get a non-cropped result: w/ Chrome and Safari:

if('devicePixelRatio' in window &&
context.webkitBackingStorePixelRatio < 2) {
canvas.setAttribute('width', 600 * devicePixelRatio)
canvas.setAttribute('height', 600 * devicePixelRatio)
context.transform(devicePixelRatio,0,0,devicePixelRatio,0,0)
}
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?