HTML and CSS Reference
In-Depth Information
A quadratic curve is based on the Bezier curve. The dif-
ference is that the quadratic curve is constructed of three
points of definition instead of just one. It can be difficult to
draw complex, Bezier curve images in CANVAS for a single,
simple reason: There are no visual drawing tools, such as
Adobe Illustrator, that export images that can be read by
the CANVAS element.
Figure 3.35
A Bezier curve.
Adding Color
So you now have basic shapes on the page. Big deal, right?
Using JavaScript you can now begin to programmatically paint
your objects. The following shows two semitransparent intersect-
ing squares. You will see that the fill color is a CSS style.
<html>
<head>
<script type=”application/x-javascript”>
function draw() {
var canvas = document.getElementById
(“myCanvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “rgb(0,0,500)”;
ctx.fillRect (10, 10, 150, 150);
ctx.fillStyle = “rgba(0, 300, 0, 0.5)”;
ctx.fillRect (75, 75, 150, 150);
}
}
</script>
</head>
<body onload=”draw();”>
<canvas id=”myCanvas” width=”300”
height=”300”></canvas>
</body>
</html>
The fillStyle method allows you to apply CSS style formatting.
Leveraging CSS increases the amount of visual control you have
on your drawings on the screen. As with SVG you can use any of
the CSS color naming formats such as Hex and RGB.
Linear and radial gradients can also be applied to CANVAS
images. As with SVG, the linear and radial gradients inherit how
CSS implements gradients. The gradient construction is devel-
oped by first creating a shape, giving the gradient a name, defin-
ing the gradient, and then applying the gradient.
The first step is to create a shape. The following is a simple
CANVAS rectangle:
