Daniel Nitsikopoulos
An introduction to HTML5 canvas: part 1

An introduction to HTML5 canvas: part 1

Posted on

THE <canvas> tag which was introduced in the HTML5 spec acts as a container for graphics to be drawn in. The canvas element itself is useless without the 2D drawing API and that’s what I’ll be look at here.

Firstly, I’d like to point out that elements drawn in the canvas are not part of the DOM and therefore cannot be bound to events. If you want your elements to respond to events, I would suggest using SVG instead.

Ok so we have that out of the way.

I’ll be using some examples to help illustrate how canvas works during this article.

 <canvas id="myCanvas" width="400px" height="400px"></canvas>

The first thing to understand about canvas is that you don’t actually draw on the canvas element itself, but rather a canvas “context” which the javascript API provides. The context is basically a drawing stack that holds all of our drawings. So let’s go ahead and define the context.

var canvas2D = document.getElementsById('myCanvas').getContext('2d')

At the moment we’re limited to a 2D context. From now on, when we want to interact with the contents of the canvas, we’re going to be calling methods on ‘canvas2D’, a full list of which can be seen here.

So let’s get started by drawing a rectangle. To do so we’re going to use the fillRect method which is defined in the spec …

Getting started with AJAX.

Getting started with AJAX.

Posted on

When it comes to building an interactive web application, creating a seamless interaction between the client-side and the server-side can be very important depending on the experience you want to give your user. The trouble is, however, that most server-side languages can’t access client-side code, and therefore can’t relay that information back to the server to execute or save it and vice versa – without a page refresh anyway, and that’s what we’re aiming to avoid here.  For most people, getting started with AJAX can be a daunting thing which is why I’m writing this post as an introduction. I won’t be presenting any code, but rather providing a walkthrough of the steps you will need to take to complete an AJAX request.

So let’s get started!

    1. Trigger and Listen
      To start things off we’ll need to tell our browser when to send a request . This can be as simple as adding a listener that listens for a button’s click event.
    2. Collect our data
      Most of the time, AJAX is used to submit a form so at this point, it’s a good time to collect each field’s value and prepare something to send to the server. This can take many forms, depending on how your server handles  incoming requests. The most common way however is just to build a query string and …

Super simple panning background

Posted on

A client came into work today and wanted a section of his site to have a full screen background image that pans left or right depending on the side of the screen your mouse was hovering. It was something something I had never done before but was pretty sure I could come up with a technique to get the effect working rather quickly. So a few lines of jQuery later and hey presto a super cool panning background image!

You can check out the Demo here or keep on reading to pick up “teh codes”.

1. The Setup!

Grab yourself a div, any div and let’s give it some basic properties:


#background-thing{
  background: url(http://www.dnitza.com/experiments/fullscreen-pan/stairway.jpg) no-repeat 0 0 scroll;
  background-size: cover;
  height: auto;
  left: 0;
  min-height: 100%;
  min-width: 1024px;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
}

2. Make some magic of the javascript variety

Don’t forget to include jQuery.


$(document).ready(function(){
$('#background-thing').mousemove(function(e){
  var mousePos = (e.pageX/$(window).width())*100;
  $('#background-thing').css('backgroundPosition', mousePos+'% 0');
});
});

And voila! A nifty panning background image!

Switch design in iOS UI

Posted on

There has been a rather strong interface design trend lately in the form of the on/off switch that has replaced two radio buttons. For example rather than picking a box to alter the state of a particular option, we now have a single switch or button that can be slid left or right, up or down or depressed/raised to select the state of the particular option it represents.

At first I thought this was a great idea, especially because it was executed so well by Apple in their first iPhone OS. The options were clear and the UI design was definite. As of late, however, I have seen a rather large handful of mobile apps that have used this same concept but executed it rather poorly. Call me stupid, but the other day I was checking in with Foursquare and couldn’t figure out which state of their “share on Twitter” button meant “off”.

I get that space is limited, and I love this concept as a solution, however the ambiguous nature of the visual had me thinking (and that’s not a good thing!).

Comparing this to something like Roamz:

We have the same deal, a small space to …

Setting up Rails 3.1 with RVM

Posted on

Just want to do a quick how to post for those out there wanting to setup Rails 3.1 on RVM and not effect their existing rails 3.0.x setup. To do this we take advantage of RVMs gemsets.

First thing to do is make sure you have the latest version of RVM


$ rvm get latest

or rvm update, depending on the version of rvm you have installed.

next thing to do is create a new gemset for Rails 3.1


$ rvm gemset create rails31

then switch to it


$ rvm gemset use rails31

and finally install rails 3.1


$ gem install rails

And there we go! nice and easy!

If you want to switch back to your rails 3.0.x gemset and haven’t setup a gemset for it, it should still be setup in the default ‘global’ gemset which you may need to reinstall rails 3.0.x into and do all your bundle installs.

So now what?

  • Start a new project and have a look around, you’ll notice that the biggest difference is the assets folder in the app directory which holds all your sass and coffee script files.
  • Take a look at the Sass and Coffee Script documentation to get started with them
  • Keep an eye on Railscasts for some more in-depth rails 3.1 focussed episodes