O'Reilly logo

HTML5 Multimedia Development Cookbook by Lee Jordan, Dale Cruse

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Rounding corners

So far we've created images and borders using square or rectangular shapes. Next we'll look at how to use the new canvas element to round the corners of those images and borders via JavaScript.

How to do it...

The ability to round corners is not native to canvas but Rob Hawkes is a super-smart guy and figured out how to make it happen. Here's what Rob did, explained at: http://rawkes.com/blog/2010/12/11/rounded-corners-in-html5-canvas.

<!DOCTYPE html> <html> <head> <title>Canvas</title> <meta charset="utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/ jquery.min.js"></script> <script> $(document).ready(function() { var canvas = $("#myCanvas"); var context = canvas.get(0).getContext("2d"); var rectX = 10; var ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required