HTML and CSS Reference
In-Depth Information
SECURITY_ERR: DOM Exception 18
In some web browsers, such as Google Chrome, you might experience an error
(SECURITY_ERR: DOM Exception 18) when trying to export the canvas while an
image is displayed (like the pattern fill type in
Example 3-3
). This usually occurs because
the web browser is executing a web page locally (loaded from the filesystem). These
errors can usually be removed by loading the HTML page from a web server—either
remotely or on your local machine.
Final Version of Text Arranger
The final version of Text Arranger (3.0) brings together all the HTML5 Text API fea-
tures we have discussed in this chapter (see
Example 3-3
). Play with the final app, and
see how the different options interact with one another. Here are a couple things you
might find interesting:
• Shadows don't work with patterns or gradients.
• Increasing the text size with a pattern that is the size of the canvas changes the
pattern on the text (it acts like a mask or window into the pattern itself).
• Canvas width and height are affected by the style width and height (scaling).
Example 3-3. Text Arranger 3.0
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH3EX3: Text Arranger 3.0</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function eventWindowLoaded() {
var pattern = new Image();
pattern.src = "texture.jpg";
pattern.onload = eventAssetsLoaded;
}
function eventAssetsLoaded() {
