Rotate canvas on mouse drag

Get the source at Github

For a larger project of mine i needed to find a way to rotate cavas elements on mousedrag. So here’s my attempt to create this user interface functionality.

Source and example

Watch the demo

rotate canvas demo

Seperate steps

First I divided the script into logical steps to simplify the problem.

  1. create a update function for the canvas.
  2. setup the mousehandlers to register the “drag” event
  3. create a helper function to calculate the angle between 2 coordinates

The key for this functionality is that the starting angle of the drag always differs. This causes the canvas drawing to jump to unwanted angles if the script does not compensate for this.

$( model.cnv ).mousedown(function(event){
    // calculate click angle minus the last angle
    var clickAngle = getAngle(cX + offX, cY + offY, event.clientX, event.clientY ) 
       - model.angle;
    $( model.cnv ).bind("mousemove", clickAngle, function(event){
      // calculate move angle minus the angle onclick
      model.angle =  ( getAngle( cX + offX, cY + offY, event.clientX, event.clientY  )
       - clickAngle);
      updateRectangle(model.angle);
    });
});

I have not tested the script with other shapes than rectangles and squares, but the script should work fine as long as the canvas elements have ‘bounding box’ with a width and height. Of course this example is a starting point and the interface could use some custom cursors or icons.

JavaScript: The Definitive Guide, Sixth Edition

Javascript the definitive guide: book cover

  • Author: David Flanagan
  • publisher: O’Reilly Media
  • pages: 1100

Summary

Novice to advanced this book will open the web as your playground, a full course on JavaScript including the new features and API’s of HTML5. It will be hard to find any topic about JavaScript which not discussed in this book.

Review

First a short introduction about me as the reviewer of this extensive Javascript book. I have worked with JavaScript for about 6 years, the last 2 years I dived more deeply into JavaScript, the main reason for this is freedom. I was mentally unrestricted in Flash and Actionscript 3, and I needed to free my mind for javascript as well.

Before this book I have read two other O’Reilly JavaScript publications; JavaScript the good parts and Javascript Patterns. Both excellent books to get a firm grasp of : structure, development and best practices of JavaScript.

For me the timing was right to dig deeper into the “framework” of JavaScript.

It immediately became clear that a lot of research has been packed into this book. The first sections explains the core features of Javascript this should get the reader quickly programming JavaScript in a right way. It is nice to see that the code examples in this section are short and self explanatory.

I read the second part with a lot of fun, this section fully prepares developers for ECMAScript 5 and HTLM 5. I learned a lot of new stuff and browser specific details. Possible pitfalls implementing new standards are clearly described. Some of the chapters I really liked were: Handling Events (17), Scripted Media and Graphics ( 21 ) and HTML5 API’s (22).

The reference is very handy, I already have used it a lot of times. It is nice to have good reference, it’s a fast, reliable and up-to-date way to look things up once familliair with the reference layout. Most times faster than a google request. With the confidence of getting clear and concise code examples.

To conclude this review I can say that this book is a must have for every “future-eager” front-end developer. This book reminds me of my worn “Essential Actionscript 3.0” book. “Essential Javascript” a.k.a Javascript the definitive guide 6th Edition can be bought O’Reilly .

Accessible Animated Canvas Menu

Get the source at Github
A few years ago a lot of websites used an animated flash menu for their navigation. The smarter ones were build progressive above the html list. This is a canvas implementation of the same principle.

Source and example

Watch the demo

canvas menu

Thinking about the menu I had several strategies.

  • Create a canvas for each menu item
  • Create one canvas which contains the menu items and one moving canvas for the hover animation

I chose for the latter one because i had the feeling that the performance would be better with large menu’s. Of course more creative menu’s can be be created with separate canvas elements for each menu item.

The script consist of three parts.

  • Reading out the html and building the menu and creating the animation canvas.
  • Event handling.
  • Tracking the mouse position for button clicks and hover states.

This way it is possible again to create irritating accessible menu’s 😉 . Luckily most clients nowadays avoids animating menu. But trends are known to die end come back again. I still need to find a proper way to position canvas elements and offsetting the origin for mouse calculations.