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.
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 rectY = 10;
var rectWidth = 100;
var rectHeight = 100;
var cornerRadius = 15;
context.lineJoin = "round";
context.lineWidth = cornerRadius;
context.strokeStyle = "rgb(0, 128, 0)";
context.strokeRect...