Drawing Paths - Curves and Arcs

Share this video with your friends

Send Tweet

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.

Kevin
Kevin
~ 10 years ago

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)
}
zhazha
zhazha
~ 7 years ago

done