Click to drag boxes. Double click to add new boxes.

This article’s code is written primarily to be easy to understand. It isn’t optimized for performance, though a little bit of the drawing is set up so that more complex shapes can easily be added in the future.

We’ll be going over a few things that are also essential to game-development (drawing loop, hit testing), and in later tutorials I will probably turn this example into a small game.

The HTML5 Canvas

A Canvas is made by using the <canvas> tag in HTML:

   <canvas id="canvas" width="400" height="300">
    This text is displayed if your browser does not support HTML5 Canvas.
   </canvas>

A canvas isn’t smart: it’s just a place for drawing pixels. If you ask it to draw something it will do so and then immediately forget everything about what you have just done. Because of this we have to keep track ourselves of all the things we want to draw (and re-draw) each frame.

So we’ll need to add:

1. Code for keeping track of objects
2. Code for initialization
3. Code for drawing the objects as they are made and move around
4. Code for mouse events

Keeping track of what we draw

To keep things simple for this example we will just make a rectangular object called Box. We’ll also make a method for creating Boxes a little easier.

// holds all our rectangles
var boxes = []; 
 
//Box object to hold data for all drawn rects
function Box() {
  this.x = 0;
  this.y = 0;
  this.w = 1; // default width and height?
  this.h = 1;
  this.fill = '#444444';
}
 
//Initialize a new Box, add it, and invalidate the canvas
function addRect(x, y, w, h, fill) {
  var rect = new Box;
  rect.x = x;
  rect.y = y;
  rect.w = w
  rect.h = h;
  rect.fill = fill;
  boxes.push(rect);
  invalidate();
}

Initialization

I’m going to add a bunch of variables for keeping track of the drawing and mouse state. I already added boxes[] to keep track of each object, but we’ll also need a var for the canvas, the canvas’ 2d context (where wall drawing is done), whether the mouse is dragging, width/height of the canvas, and so on. We’ll also want to make a second canvas, for selection purposes, but I’ll talk about that later.

var canvas;
var ctx;
var WIDTH;
var HEIGHT;
var INTERVAL = 20;  // how often, in milliseconds, we check to see if a redraw is needed
 
var isDrag = false;
var mx, my; // mouse coordinates
 
 // when set to true, the canvas will redraw everything
 // invalidate() just sets this to false right now
 // we want to call invalidate() whenever we make a change
var canvasValid = false;
 
// The node (if any) being selected.
// If in the future we want to select multiple objects, this will get turned into an array
var mySel; 
 
// The selection color and width. Right now we have a red selection with a small width
var mySelColor = '#CC0000';
var mySelWidth = 2;
 
// we use a fake canvas to draw individual shapes for selection testing
var ghostcanvas;
var gctx; // fake canvas context
 
// since we can drag from anywhere in a node
// instead of just its x/y corner, we need to save
// the offset of the mouse when we start dragging.
var offsetx, offsety;
 
// Padding and border style widths for mouse offsets
var stylePaddingLeft, stylePaddingTop, styleBorderLeft, styleBorderTop;
 
// initialize our canvas, add a ghost canvas, set draw loop
// then add everything we want to intially exist on the canvas
function init() {
  canvas = document.getElementById('canvas');
  HEIGHT = canvas.height;
  WIDTH = canvas.width;
  ctx = canvas.getContext('2d');
  ghostcanvas = document.createElement('canvas');
  ghostcanvas.height = HEIGHT;
  ghostcanvas.width = WIDTH;
  gctx = ghostcanvas.getContext('2d');
 
  //fixes a problem where double clicking causes text to get selected on the canvas
  canvas.onselectstart = function () { return false; }
 
  // fixes mouse co-ordinate problems when there's a border or padding
  // see getMouse for more detail
  if (document.defaultView && document.defaultView.getComputedStyle) {
    stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10)      || 0;
    stylePaddingTop  = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10)       || 0;
    styleBorderLeft  = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10)  || 0;
    styleBorderTop   = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10)   || 0;
  }
 
  // make draw() fire every INTERVAL milliseconds.
  setInterval(draw, INTERVAL);
 
  // add our events. Up and down are for dragging,
  // double click is for making new boxes
  canvas.onmousedown = myDown;
  canvas.onmouseup = myUp;
  canvas.ondblclick = myDblClick;
 
  // add custom initialization here:
 
  // add an orange rectangle
  addRect(200, 200, 40, 40, '#FFC02B');
 
  // add a smaller blue rectangle
  addRect(25, 90, 25, 25, '#2BB8FF');
}

Drawing

Since our canvas is animated (boxes move over time), we have to set up a draw loop as I did in the init() function.

We have to draw at a frame rate, maybe every 20 milliseconds or so. However, redrawing doesn’t just mean drawing the shapes over and over; we also have to clear the canvas before every redraw. If we don’t clear it, dragging will look like the box is making a solid line because none of the old box-positions will go away.

Because of this, we clear the entire canvas before each Draw frame. This can get expensive, and we only want to draw if something has actually changed within our framework, so we will consider the canvas to be either valid or invalid.

If everything just got drawn, the canvas is valid and there’s no need to draw again. However, if we do something like add a new Box or try to move a box by dragging it, the canvas will get invalidated and draw() will do a clear-redraw-validate.

This isn’t the only way to optimize drawing, after all clearing and redrawing the entire canvas when one little box moves is excessive, but canvas invalidation is the only optimization we’re going to use for now.

// While draw is called as often as the INTERVAL variable demands,
// It only ever does something if the canvas gets invalidated by our code
function draw() {
  if (canvasValid == false) {
    clear(ctx);
 
    // Add stuff you want drawn in the background all the time here
 
    // draw all boxes
    var l = boxes.length;
    for (var i = 0; i < l; i++) {
        drawshape(ctx, boxes[i], boxes[i].fill, boxes[i].fill);
    }
 
    // draw selection
    // right now this is just a stroke along the edge of the selected box
    if (mySel != null) {
      ctx.strokeStyle = mySelColor;
      ctx.lineWidth = mySelWidth;
      ctx.strokeRect(mySel.x,mySel.y,mySel.w,mySel.h);
    }
 
    // Add stuff you want drawn on top all the time here
 
 
    canvasValid = true;
  }
}

As you can see, we go through all of boxes[] and draw each one, in order from first to last. This will give the nice appearance of later boxes looking as if they are on top of earlier boxes. After all the boxes are drawn, a selection handle (if there’s a selection) gets drawn around the box that mySel references.

If you wanted a background (like a city) or a foreground (like clouds), one way to add them is to put them before or after the main two drawing bits. There are better ways though, like using multiple canvases, but we won’t go over that here.

Mouse events

Now we have objects, initialization, and a loop that will constantly re-draw when needed. All thats left is to make the mouse do things upon pressing, releasing, and double clicking.

With our MouseDown event we need to see if there are any objects we could have clicked on. And we don’t want just any object; selections make the most sense when we only grab the top-most object.

Now we could do something very easy and just check the bounds of each of our boxes – see if the mouse co-ordinates lie within the boxes width and height range – but that isn’t as extendable as I’d like. After all, What if later we want to select lines instead of boxes? Or select triangles? Or select text?

So we’re going to do selection in a more general way: We will draw each shape, one at a time, onto a “ghost” canvas, and see if the mouse co-ordinates lie on a drawn pixel or not.

A ghost canvas (or fake canvas, or temporary canvas) is a second canvas that we created in the same size and shape as our normal one. Only nothing from it will ever get seen, because we only created it in code and never added it to the page. Go back and look at ghostcanvas and its context (gctx) in the init() function to see how it was made.

// Happens when the mouse is clicked in the canvas
function myDown(e){
  getMouse(e);
  clear(gctx); // clear the ghost canvas from its last use
 
  // run through all the boxes
  var l = boxes.length;
  for (var i = l-1; i >= 0; i--) {
    // draw shape onto ghost context
    drawshape(gctx, boxes[i], 'black', 'black');
 
    // get image data at the mouse x,y pixel
    var imageData = gctx.getImageData(mx, my, 1, 1);
    var index = (mx + my * imageData.width) * 4;
 
    // if the mouse pixel exists, select and break
    if (imageData.data[3] > 0) {
      mySel = boxes[i];
      offsetx = mx - mySel.x;
      offsety = my - mySel.y;
      mySel.x = mx - offsetx;
      mySel.y = my - offsety;
      isDrag = true;
      canvas.onmousemove = myMove;
      invalidate();
      clear(gctx);
      return;
    }
 
  }
  // havent returned means we have selected nothing
  mySel = null;
  // clear the ghost canvas for next time
  clear(gctx);
  // invalidate because we might need the selection border to disappear
  invalidate();
}

myMove and myUp are pretty self explanatory. the var isDrag becomes true if myDown found something to select, and it becomes false again when the mouse is released (myUp).

// Happens when the mouse is moving inside the canvas
function myMove(e){
  if (isDrag){
    getMouse(e);
 
    mySel.x = mx - offsetx;
    mySel.y = my - offsety;   
 
    // something is changing position so we better invalidate the canvas!
    invalidate();
  }
}
 
function myUp(){
  isDrag = false;
  canvas.onmousemove = null;
}

There are a few little methods I added that are not shown, such as one to correctly get the mouse position in a canvas. You can see and download the full demo source here.

Now that we have a basic structure down, it is easy to write code that handles more complex shapes, like paths or images or video. Rotation and scaling these things takes a bit more work, but is quite doable with the Canvas and our selection method is already set up to deal with them.

If you would like to see this code enhanced in future posts (or have any fixes), let me know how in the comments.

So now I must wonder how long it will take before this page appears on Google as the sole result.

Edit: Apparently, about a day.

I have created a simple page here that contains the embedded feed of all 12 ROVs from BP’s website.

Let me know if you have any additions or modifications to make the page better.

By default these keys open up a mail program, HP’s MediaSmart SmartMenu, a web browser, printing, and the Windows calculator program. You can see them on the left side of the keyboard, with labels I’ll explain in a moment:

My original intent was to make a small program that would sit in the system tray and simply have a menu to enable/disable all the buttons at will. The buttons are nice, but they aren’t the most useful thing to have enabled when one is trying to play a full-screen game. I’d keep getting sent back to the desktop because I accidentally opened a calculator instead of pressing Ctrl. Similar problems abound with Photoshop, or any program that demands constant use of Tab and Ctrl.

Making a small key-capture program I found out that the first odd-one out was the Print key, which literally just sends the key press for LeftCtrl and P. The second odd one is the wave- looking key, the SmartMenu button, which I’ll address later.

The others had strange key names: BrowserHome, calc.exe, and LaunchMail. At that point I decided to look for those names in the registry and came upon some interesting values:

There are 5 entries in a registry folder corresponding to some of the Quick Launch keys as well as mysterious nonexistant keys. First I’ll mention what the real keys do and how to change them.



Editing the keys

Go to the start bar in Windows 7, type “regedit” and press enter. If you’re unfamiliar with the Windows registry then please be careful, messing with values here can cause a lot of errors.

Navigate to the registry folder:

Computer\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\AppKey

In the folder you’ll see more folders, the three we care about are:

• 15 calls for the Assocation of ‘mailto’
• 18 calls for a ShellExecute of ‘calc.exe’
• 7 calls for the Assocation of ‘http’ (opens the browser or program associated with http)

These are the mail, calculator, and internet buttons respectively. If you want to change them, simply modify the values inside each folder. Associations will open the program that is tied to the protocol or file type. For these two buttons, the ‘mailto’ association opens Windows Live Mail (by default), and the ‘http’ association opens whatever browser is your default. ShellExecute on the other hand is the same as typing something into Run and pressing enter.

An example: Let’s say you want the mail button to open Notepad: Go into the folder named 15, rename “Association” to “ShellExecute”, double click ShellExecute to modify the key’s data and enter “notepad.exe”, replacing “mailto.”

Want to disable a button? Just clear out the ShellExecute or Association data. For the mail button you would double click the Association and replace “mailto” with nothing.

What about the wave key?

The wave-looking key actually opens a program called ‘HP MediaSmart SmartMenu.’ You can uninstall this from Programs and Features in the Control Panel if you wish. I haven’t yet found a way to do anything else with it.



What were those other registry entries?

• 16 calls for the Assocation of .cda, this seems to be a nonexistant key that was intended to be media-centric
• 17 calls a ShellExecute on ::{20D04FE0-3AEA-1069-A2D8-08002B30309D}, which is the ParsingName for “My Computer” in Folder Descriptions, so I suppose it was a My Computer button

These keys were probably programmed for but never implemented in the final Envy design.

None of this gives us an easy way to disable the keys temporarily, though, so I guess I’ll have to release a small program later to let people temporarily disable and re-enable them on the fly.

Also, if anyone has any information about the Wireless On/Off key above the “+” key, please let me know. I’d really like to find a way to temporarily disable that, or better yet only make it work when “fn” is pressed, but so far haven’t found anything useful on the key.

This topic has been discussed in threads like this one.

I did a great deal of digging, most of it ending in other users complaining about how neither Valve or ATI seem to care about this issue – and indeed I emailed Valve and they emailed me back saying that they don’t support the SDK. Alas, I have found a solution to the Text corruption many of us have seen in Hammer!

The solution:

1. Download a program known as ATI Tray Tools. I had to use the Beta since I’m running Windows 7.

2. Right click its icon, Go to

3D >
Additional Options >
and check the box for Alternate Pixel Center

This will fix the error.

Happy level making!

EDIT:
Apparently, while this tweak fixes Hammer, it breaks all the Source games in a similar text-garbled manner. You’ll have to turn it off again to play Source games.

Unfortunately, getting Age of Empires to work in this modern day is a bit of a pain. The game was built on network technology known as IPX that has since gone the way of the dinosaurs. So far gone, in fact, that Microsoft decided not to include it in Vista and Windows 7. All of my computers are using Windows 7 now, so getting the game to play over LAN proved to be difficult.

I didn’t want to deal with trying to hodge-podge together an IPX installation, so I decided to look for ways for the TCP/IP method of gameplay to work. This method rarely worked for me, and when it did it only worked on some computers and not others.

Apparently, all I needed to do was assign all the computers that were playing in the game to have static IP addresses. If you don’t know what that is, there’s a link to a guide at the bottom of this article. Set static IPs on every computer that will be playing, not just the host.

Then, on the computer hosting, select Internet TCP/IP Connection for DirectPlay and NOT the LAN option. For some reason, selecting the LAN option caused issues. However, all the computers that will be joining can just select the LAN option.

Assuming there are no firewall issues, you should be good to go. I tested this with Windows 7 only machines, and only over LAN. If anyone has tried this as described and couldn’t get it to work, I’d like to hear from you.

Have fun playing!

Here’s a wonderful guide from PortForward.com on setting up a static IP.

Take a look at what’s changed. I left the HP Envy 15 in for a comparison to a modern laptop with non-Apple brand pricing.

Little else has changed on the Pro aside from the processor, video card, and max screen resolution. The supported DirectX and OpenGL are still still 10.1 and 2.1 respectively, and the laptop’s price remains unchanged*.

The updated video card is NVIDIA’s GeForce GT 330M, which is an over-clocked GT 240M, which itself is just an over-clocked GT 230M (June 2009), which explains the aging DirectX and OpenGL versions.

Nonetheless, thanks to Apple’s staunch refusal to discount hardware that was already two years old, it is a significantly better time to buy a MacBook Pro than it was just one week ago, be it new or used. Every other laptop manufacturer has had to reduce prices on aged models or introduce newer models in order to stay competitive, but it seems that Apple is immune to Father Time, perhaps because its consumer base practices an isolationism unseen since the days of Hai jin.

This is of course not a bad thing in itself. If you’re running an all-Mac shop then right now is quite possibly the best time to buy a MacBook Pro. Yesterday, however, was quite possibly the worst.

* As configured above. I believe the minimum price for a base 15-inch MacBook Pro is slightly less than it was previous.

Every time I mention that I’m looking for a new laptop I have gotten no good suggestions other than one recommendation for the HP Envy and a handful of people advocating the MacBook Pro. I don’t plan on running OSX but I recall back in late 2007 an article mentioning the Mac being the fastest Vista notebook, so I figured I’d at least take a look. Comparing it to the Envy though, the results were pretty stark.

Geekbench generally rates the two laptops on the whole with a score average of around 3700 for the Mac vs 5000 for the HP Envy, making the performance-per-price enormously in favor of the Envy.

The Mac’s poor marks largely stem from its age. This is the newest 15″ laptop, according to Apple’s own store, yet it is using a processor and video card that were released in July 2008 and June 2008, respectively. On the other hand, the Envy has a video card from last month and a processor from September of 2009.

So why the price discrepancy? $650 more than the up-to-date Envy is an enormous sum to pay for a laptop that was largely produced a year and a half ago. It doesn’t help matters to be reminded that this is the performance line of laptop, nearly Apple’s highest attainable 15″ without going deeper in to terrible price-per-performance territory. (see below)

I don’t mean to say the MacBook Pro will never be worth its cost. It is expected that Apple will be refreshing its product line in the very near future, but in the interim it seems almost cruel to Mac fans to charge so much for pathetically dated technology. Right now is quite possibly the worst time to buy a MacBook Pro.

I guess people who consider MacBook Pros are only comparing them to other (past) MacBook Pros, and in solely that light they’re clearly well-endowed. The only reason to buy a MacBook Pro at this point in time would be an enormous desire for OSX over any other operating system coupled with a belligerent ignorance of computer hardware timelines. What’s more absurd than the price is be that Apple still seems to be selling the things.

I’m sure others have made this observation in the past, but I get the feeling that Apple actually holds their users hostage. If Apple opened up OSX to be installable on non-Mac platforms it would almost surely kill the MacBook Pro of today, or maybe just force them into using hardware that isn’t trash. Hardware this old for that much just seems gimmicky, or even dishonest.

Other upgrades not added to my table don’t help the Mac much:
The MacBook Pro has an optional Intel Core2 Duo T9900 @ 3.06GHz, which came out in April 2009, (passmark 2328) +$300 for 333 more passmark points
The Envy has an optional Intel Core i7 820QM @ 1.73GHz, brand new, (passmark 3708) +$400 for 412 more passmark points

The Mac can be upgraded to 8GB for $600 more while the Envy can be upgraded to 8GB for $300 more. The HP has a large advantage even with after-market upgrades due to it having 4 RAM slots instead of 2.

As an aside, there are a few other aspects of the laptops that could be compared that I didn’t factor in to the above because they are hardly worth mentioning once the processor and video card age are apparent, but I’ll list them here for those interested. The HP wins on the battery side of things (life is debatable, being able to swap out batteries is not. Like I said above the Envy also has more RAM upgrade options as well as two HDD slots. I didn’t look much at sound, but I’m going to guess that the MacBook Pro’s speakers produce better sound than the Envy. The Envy also has no optical drive inside of itself (remember the second HDD slot), so I added the HP external USB optical option to my configuration, which added (surprisingly only) $50 to its price.