Preparing the stage


show more Preparing the stage provides you with in-depth training on Design. Taught by Joseph Lowery as part of the HTML5 Projects: Customized Photo Cards show less
please wait ...

Preparing the stage

It's just about show time, and we have a user selected background, as well as a user contributed image. Before we can get into the actual combined image manipulation, however, we have to take care of a little bit of prep. The first of which is linking to a terrific library for all things canvas. I'll also show you how to use another code library to get the dimensions of the uploaded image. First, let's call in the cavalry and link to a few excellent resources. But first is a library of functions for working with canvas called KineticJS.

KineticJS was created by Eric Rowell, who has done a most excellent job with the code, as well as documenting its features. We will be using his library to handle the core of our image manipulation. Let's open the code editor and link in the file. And I'm going to put it right after the link to main.css here, and it's a script tag of course, where the source is http:// and we're going to his site, which is html5canvastutorial.com/...

Preparing the stage
Video duration: 7m 1s 44m 20s Intermediate

Viewers:

Preparing the stage provides you with in-depth training on Design. Taught by Joseph Lowery as part of the HTML5 Projects: Customized Photo Cards

Subjects:
Design Web
Software:
HTML JavaScript CSS
Author:
please wait ...