By now you probably are aware that MockupTiger renders all the widgets using HTML5 canvas object. HTML5 canvas is like a drawing slate, just write commands and it will draw the shape.

The images below are custom canvas objects drawn directly in MockupTiger using Canvas commands

custom canvas object

Based on this simple and powerful concept I have been tinkering around an experimental widget. It is extremely powerful and hence chances of over indulgence can lead to huge custom objects that take down the performance.

More details about the canvas element http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

So using the canvas object requires the knowledge of few basic commands.

The world of User Interface is constantly evolving and is no longer restricted to the old standard interface elements. Look around your latest gadgets from Ipod, Ipad, web interfaces, and all other fancy ways you can allow user interactions.

The addition of this experimental widget is to provide more flexibility in designing your own components.

So how do you draw these custom objects?

The commands are simple and if you take a look at existing canvas script commands you will get a hang of it.

The following set of commands draw a line from point 10,10 to 30,30

ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(30,30);
ctx.stroke();

The objects drawn using the Canvas are vector objects. So you can add scaling commands at the beginning to size it appropriately.

Following is the partial set of commands to draw "Statue of Liberty". The original clipart is courtesy of http://www.openclipart.org

The SVG image was converted to equivalent Javascript commands and then pasted inside the mockuptiger canvas Edit dialog

ctx.translate(0,0);
ctx.translate(0,0);
ctx.scale(1,1);
ctx.translate(0,0);
ctx.strokeStyle = 'rgba(0,0,0,0)';
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.miterLimit = 4;
ctx.save();
ctx.save();
ctx.fillStyle = "#ffffff";
ctx.beginPath();
ctx.moveTo(49.896,15.444);
ctx.bezierCurveTo(50.744,15.461,51.06,16.008,51.84,16.092000000000002);
ctx.bezierCurveTo(51.756,16.572000000000003,51.984,16.740000000000002,51.948,17.172000000000004);
ctx.bezierCurveTo(51.646,17.411000000000005,51.218,17.522000000000006,50.651,17.496000000000006);
ctx.bezierCurveTo(50.438,16.774,49.953,16.322,49.896,15.444);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.save();

This feature is in experimental mode. What does it mean?

It just means, that the implementation could change. Since you get the access to the HTML5 canvas context you can pretty draw anything you want.

The idea is to encourage creative design and not be limited to what MockupTiger already offers in terms of pre-built widget. If you come up with something cool just share it with your Mockup Gallery by going to Export >> Export to Gallery. The custom widget will be posted at http://www.wireframemockups.com so everyone has access to it and re-use it.

How to use this Custom Canvas object

1.Go to the Quick Add box on the top

2.Type "canvas"

 

 

Image

3.Hit Enter and a square like object is put on your working area

Image

4.Double click to edit the source of this canvas object.

You will notice that it just draws 4 lines in order to create the square.

So play around it with it and have fun!

Related posts:

  1. Html5 canvas – Use of getimagedata – putimagedata or drawimage
  2. How to draw lines in mockups
  3. jquery Autocomplete – search feature for mockups
  4. KPI widget Mockup for Dashboards
  5. Cool things about MockupTiger

Posted in Pre-release