Scribd
Upload
51 views1 page

Bringing Out Your Inner Artist: The Canvas

This document discusses building a Twitter shirt design app called TweetShirt using the HTML5 canvas element. It covers placing a canvas in a web page, drawing shapes and text on the canvas using JavaScript, and handling browsers that do not support canvas. The goal is to bring out the inner artist and allow creation and manipulation of pixels directly in the browser to build an app for designing custom Twitter shirt designs.

Uploaded by

hghg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
51 views1 page

Bringing Out Your Inner Artist: The Canvas

This document discusses building a Twitter shirt design app called TweetShirt using the HTML5 canvas element. It covers placing a canvas in a web page, drawing shapes and text on the canvas using JavaScript, and handling browsers that do not support canvas. The goal is to bring out the inner artist and allow creation and manipulation of pixels directly in the browser to build an app for designing custom Twitter shirt designs.

Uploaded by

hghg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 1

xvitable of contentsOur new startup: TweetShirt 282Checking out the “comps” 283How to

get a canvas into your web page 286How to see your canvas 288Drawing on the Canvas
290Failing gracefully 295TweetShirt: the Big Picture 297First, let’s get the HTML in place
300Now, let’s add the <form> 301Time to get computational, with JavaScript 302Writing the
drawSquare function 304Add the call to fillBackgroundColor 307Meanwhile, back at
TweetShirt.com... 309Drawing with Geeks 311Breaking down the arc method 314A little
taste of using the arc 316I say degree, you say radian 317Back to writing the TweetShirt
circle code 318Writing the drawCircle function... 319Getting your tweets 323Canvas Text Up
Close 328Giving drawText a spin 330Completing the drawText function 331Bullet Points

338Exercise Solutions 341 7 The Canvasbringing

inner artistHTML’s been liberated from being just a


out your

“markup” language. With HTML5’s new canvas element you’ve got the power
to create, manipulate and destroy pixels, right in your own hands. In this chapter we'll
use the canvas element to bring out your inner artist—no more talk about HTML
being all semantics and no presentation; with canvas we're going to paint and draw
with color. Now it's all about presentation. We’ll tackle how to place a canvas in your
pages, how to draw text and graphics (using JavaScript of course), and even how to
handle browsers that don't support the canvas element. And canvas isn't just a one-
hit wonder; you're going to be seeing a lot more of canvas in other chapters in this
book.A new HTML5 startup is just waitin

You might also like