The light of all things development is shining down on me…

Not so exciting morning: scrapping ice off my car when I am supposed to be living in the south.

Exciting morning: indulging in the <canvas> tag of HTML5 and learning how to complete my Capstone! Cue a less-stressed Carey.

Some of you may think my ‘exciting’ moment is not-so exciting. Well poo poo it is for me and if I could I would stick my tongue out at you.

Capstone is really starting to roll and I can feel the tension with our individual projects vibrating throughout the room. I’m personally trying to avoid the freak out by pacing myself as Cassie and I have created a very hefty first half of the semester calendar. Basically, we don’t want to be doing too much by April.

Anyways, I’m reading yet another fantastic, straightforward, easy-to-read book “HTML5: The Missing Manual,” and they dedicate an entire section on the canvas element, which is basically a drawing board in an HTML browser. (Have I told you how awesome HTML5 is? IT’S AWESOME!).

This drawing board is going to allow me to implement Cassie’s map into the HTML and (hopefully) draw paths over the map with this <canvas> function. And, yes, these paths are curved! Here’s a little code snippet:

var canvas = document.getElementById(“drawingCanvas”);

var context = canvas.getContext(“2d”);

// Put the pen where the curve starts.

context.moveTo(62, 242);

// Create variables for the two control points and the end point of the curve.

var control1_x = 187;

var control1_y = 32;

var control2_x = 429;

var control2_y = 480;

var endPointX = 365;

var endPointY = 133;

// Draw the curve.

context.bezierCurveTo(control1_x, control1_y, control2_x, control2_y,

endPointX, endPointY);


It’s basic JavaScript, best implemented in a separate .html file for better browser speed. The bezierCurve is the line and the control var help identify the curving points of the path. Best part, I can repeatedly create start and end points, which is exactly what I need to make this app work!

Here’s an awesome little tutorial to learn how to create perfect path trajectory that you’re looking for. Basically how to do the math without thinking too hard:

And for all those nit-picky people out there, the <canvas> tag will work for a mobile app with Safari iOS. Version 1 to be exact. Let’s be honest, how bad would it suck if I did 3 months of work on this app, come to find it not working all because of compatibility issues. That’s why we should have universally browsing and code!

I feel like I have lost the elephant sitting on my shoulders. This worry weight of not knowing exactly how I am going to complete this app has been making me a cranky, whiney, negative Nancy for the past two weeks, so I apologize to my friends and classmates for my sourpuss attitude. I’m ashamed. In my defense, my degree depends on this project.

(Sidenote: Apparently, I have to pay $100 to graduate. 100 DOLLARS! Um… I believe I payed some big bucks cough3ograndcough to even come here, why does this school keep sucking money out of us? They should be ashamed. The principle of this policy is wrong and the school should really reconsider this charge because it makes them look like greedy SOBs.)

Here’s to a happier and lighter CB. Cheers!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s