Online Book Reader

Home Category

Choose a category
All
Classic-Fiction

HTML5 Canvas [43]

By Root 6375 0

button:

formElement = document.getElementById("createImageData");

formElement.addEventListener('click', createImageDataPressed, false);

Then, in the createImageDataPressed() event handler, we call the toDataURL() method of the Canvas object (theCanvas), and set the value of the imageDataDisplay to the data returned from toDataURL(). Finally, using the image data as the URL for the window, we call window.open(). When we do this, a window will pop open, displaying the actual image created from the canvas (see Figure 3-11). You can right-click and save this image, just like any other image displayed in an HTML page. Pretty cool, eh?function createImageDataPressed(e) {var imageDataDisplay = document.getElementById('imageDataDisplay');imageDataDisplay.value = theCanvas.toDataURL();window.open(imageDataDisplay.value,"canvasImage","left=0,top=0,width=" +theCanvas.width + ",height=" + theCanvas.height +",toolbar=0,resizable=0");}Figure 3-11. Canvas exported image with toDataURL()SECURITY_ERR: DOM EXCEPTION 18In 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 ArrangerThe final version of Text Arranger (3.0) brings together all the HTML5 Text API features 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() {canvasApp();}function canvasApp() {var message = "your text";var fontSize = "50";var fontFace = "serif";var textFillColor = "#ff0000";var textAlpha = 1;var shadowX = 1;var shadowY = 1;var shadowBlur = 1;var shadowColor = "#707070";var textBaseline = "middle";var textAlign = "center";var fillOrStroke ="fill";var fontWeight = "normal";var fontStyle = "normal";var fillType = "colorFill";var textFillColor2 = "#000000";var pattern = new Image();if (!canvasSupport()) {return;}var theCanvas = document.getElementById("canvasOne");var context = theCanvas.getContext("2d");var formElement = document.getElementById("textBox");formElement.addEventListener("keyup", textBoxChanged, false);formElement = document.getElementById("fillOrStroke");formElement.addEventListener("change", fillOrStrokeChanged, false);formElement = document.getElementById("textSize");formElement.addEventListener("change", textSizeChanged, false);formElement = document.getElementById("textFillColor");formElement.addEventListener("change", textFillColorChanged, false);formElement = document.getElementById("textFont");formElement.addEventListener("change", textFontChanged, false);formElement = document.getElementById("textBaseline");formElement.addEventListener("change", textBaselineChanged,</div> </div> <div id="pager" style="text-align: center;margin: auto;"> <a data-ajax="false" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window" href="/article/html5-canvas-f8ab17.html">Return Main Page</a> <a data-ajax="false" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window" href="/read/html5-canvas-f8ab17/42.html">Previous Page</a> <a data-ajax="false" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window" href="/read/html5-canvas-f8ab17/44.html">Next Page</a> </div> <div data-role="footer" id="tail" style="margin-top: 30px;"> <h3>®Online Book Reader</h3> </div> </div> </body>  </html>