{"id":398,"date":"2015-02-24T18:12:06","date_gmt":"2015-02-24T12:12:06","guid":{"rendered":"http:\/\/promincproductions.com\/blog\/?p=398"},"modified":"2015-02-26T09:28:09","modified_gmt":"2015-02-26T03:28:09","slug":"html5-canvas-element-and-its-clipto-property-using-fabricjs-and-nodejs","status":"publish","type":"post","link":"https:\/\/promincproductions.com\/blog\/html5-canvas-element-and-its-clipto-property-using-fabricjs-and-nodejs\/","title":{"rendered":"HTML5 Canvas Element and it’s clipTo property using FabricJS and NodeJS"},"content":{"rendered":"
\"Using<\/a>
This article discusses how to use HTML5, FabricJS, and NodeJS to make a dynamic web app for interacting with the HTML5 Canvas. Also, how to clip an image to a bounding box to create a crop function in FabricJS.<\/figcaption><\/figure>\n

Sometime ago I was new to the HTML5 canvas – it sounded cool with unlimited possibilities\u00a0but I had no use case for it at the time and no time to dabble with it. \u00a0But then a project came along and I didn’t just dip my toe into the canvas world, I jumped head first in! \u00a0Well sort of – I utilized\u00a0the FabricJS library<\/a> to try and ease my way in. \u00a0Then, shortly after that, I had to dive into setting up NodeJS<\/a> and created a webserver in NodeJS. \u00a0The NodeJS webserver is used to generate high-resolution print quality images from the design created on the HTML5 canvas.<\/p>\n

A quick side note: In this\u00a0application, the website owners print the high resolution images for the client. \u00a0While HTML5 and the canvas could create the print quality images in the browser with out using the NodeJS server, I ran into issues in transferring the images to the web server for the business to print. \u00a0The biggest issue came from mobile devices and file size and memory limitations set there.<\/p>\n

So my first dive into HTML5 Canvas and FabricJS, I needed to utilize the clipTo property. \u00a0And I got it to work, but after a ton of fumbling and struggling. \u00a0In hindsight that I learned this week, I didn’t understand what was happening. \u00a0So hopefully I can help clear that up for some others.<\/p>\n

What is the HTML5 Canvas?<\/h2>\n

We need to understand this first. \u00a0At it’s base level, the <canvas> is nothing more than another HTML element really… \u00a0If you add this tag you won’t get anything cool or fancy happening on your page. \u00a0But it’s more of a powerful placeholder for what is yet to come.<\/p>\n

The way you “paint” on your canvas (which you actually can with free hand options) is typically through Javascript code. \u00a0This can be done ‘statically’, or dynamically through user interactions. \u00a0And this is where you should get excited. \u00a0Users can modify the canvas through HTML controls you offer them. \u00a0This is what brings the canvas alive and opens the door to some amazing interactivity on your website!<\/p>\n

What is unique about the <canvas> tag is that the elements you put on\u00a0the canvas do NOT become a part of the DOM structure. \u00a0So anything that lives on the canvas kind of lives in no mans land so to speak… \u00a0So what this means is that from a developers standpoint, trying to inspect the contents of the canvas and doing debugging is rather difficult. \u00a0(Again, I’ve never worked in native Canvas, so I may be wrong here and welcome comments if I’m off base on this.)<\/p>\n

Also,\u00a0since I come from an SEO mindset, I’ll point out that the canvas will have zero SEO benefit for you, and if your entire\u00a0page is built on the canvas, that means that you will kill your SEO value. \u00a0BUT, adding canvas elements through out your page and site won’t be a problem – I’m just saying you still need traditional text and image content for Search Engines to be able to understand what your page is about. \u00a0Think of this much like Flash – search engines struggled to understand Flash elements, partially because they were dynamic components and thus the contents of the page would change. \u00a0In essence, canvas is the direct replacement to Flash both in functionality and purpose, so they see it the same way.<\/p>\n

I should note that there is a way to view the Canvas in your debugger (this method is for Chrome; I believe something similar can be done in Firebug), but I don’t find it to be too overly helpful. \u00a0Using the profiling features you can see how the canvas renders and some other details. \u00a0Here is a great tutorial on profiling the canvas\u00a0from HTML5 Rocks<\/a>.<\/p>\n

Reference: W3Schools<\/a><\/p>\n

FabricJS Brings A Lot to Canvas Development<\/h2>\n

I mentioned above that you can use Javascript to write to the canvas and build interactive controls. \u00a0As with most programming tasks, there are various methods to approach this.\u00a0 In my case, I’ve using\u00a0the FabricJS library to simplify the programming tasks\u00a0–\u00a0FabricJS is designed to make it a bit easier to work with the <canvas> element.<\/p>\n

Seeing as I haven’t dabbled too deeply into the raw canvas methods I’m not sure, just how much FabricJS really simplifies things. \u00a0But I will say this – what would take 5 lines of raw canvas code can be accomplished in 1 line of FabricJS code. \u00a0I did look at some other libraries as well for manipulating the canvas, but they didn’t seem as robust or as friendly for working with images and text.<\/p>\n

As stated in the section above, seeing what is on the canvas and debugging\u00a0it can be tough. \u00a0But this is one of the benefits of working with FabricJS. \u00a0What FabricJS does behind the scenes is builds the contents that go onto the canvas into JSON objects. \u00a0The JSON objects then get rendered into Canvas elements. \u00a0SO, this means that the JSON objects are now javascript variables, which means you can use the Javascript console in your developers tools to see what is on the canvas. \u00a0Additionally, you can easily manipulate your canvas object by modifying the JSON object and calling the render method. \u00a0In other-words, you have full insight and control over your\u00a0canvas element!<\/p>\n

I do have to give huge props to Kangax and Kienz<\/a> for their efforts in developing the FabricJS library though. \u00a0The documentation isn’t always as clear or abundant as I may like at times, however it is still growing in community and usership and StackOverflow has been a great resource for information. \u00a0The basics are pretty well documented, but as you try to get more advanced and flex what FabricJS can do you need to pull up your sleeves and dig in deep.<\/p>\n

Debugging Canvas with FabricJS<\/h2>\n

Using your Javascript console, or via console.log in your scripts, you can output the JSON objects that FabricJS is using for the canvas.<\/p>\n

console.log( canvasVariableName.canvas );\r\n<\/code><\/pre>\n
I forget the reason, but I have had to use a slightly modified method to do this in my webapp – I believe it’s simply because I have two canvases on the same page and one script that auto-detects which canvas you are working on. \u00a0So I’m using this script instead to accomplish the same thing:<\/p>\n
console.log( document.getElementById('CanvasID').fabric );\r\n<\/code><\/pre>\n
So now you’ll output the JSON object that is powering your Canvas. \u00a0Also, from your browsers debugger you can copy this object to the clipboard if you’d rather view it in a text editor.<\/p>\n
copy( document.getElementById('CanvasID').fabric );\r\n<\/code><\/pre>\n
So HTML5 Canvas is JSON, right? No.<\/h2>\n
This is where my headaches were… I worked with FabricJS enough and inspected the JSON objects and just assumed that HTML5 Canvas was built on JSON and JSON alone. \u00a0But I’m finding that I’m quite wrong here. \u00a0How it really works is that the JSON object is sent to FabricJS to interpret how to display the HTML5 Canvas. \u00a0So to reiterate this, because this can become important, JSON is nothing more than instructions – it’s NOT HTML5 Canvas. \u00a0Keep reading if you don’t get why that’s important.<\/p>\n
Wasn’t this article going to talk about the clipTo property?<\/h2>\n
Where I learned that canvas and JSON are not the same\u00a0the hard way, is I was trying to set the clipTo property for an image. \u00a0So my task at hand was to have an image in a bounding box – so you can resize and reposition the image but it will never spill outside of the box that it lives in. \u00a0In other-words, I’m trying to build a cropping or picture framing method. \u00a0To do this, you need to clip the image to the bounding box using the clipTo property on the image – so cut off\u00a0the edges of the image that fall outside of the bounding box. \u00a0Sounds simple, right? \u00a0Well not so much… (and on a side note, HTML5 has a default method for this that FabricJS does not recognize – it’s called the\u00a0globalCompositeOperation<\/a>. \u00a0There are 12 methods of how you can composite two laters together.) \u00a0I did find a solution for the bounding box with the clipTo property, and you can find that here<\/a>.<\/p>\n
After much work, I was able to accomplish this task, and you can find a working example of how I used FabricJS to clip and image to a bounding box<\/a> on JS Fiddle.<\/p>\n
The concept is this though – you have an image element, and you have a bounding box element (a rectangle object). \u00a0A function then calculates the offsets for\u00a0the clip to object, which is in essence an\u00a0inverse dimension that accounts for relative position within the canvas and rotation angles. \u00a0Something like that at least. \u00a0;) \u00a0It works and it’s been a while since I’ve really dug into the code till I write this, so hopefully this all makes sense still.<\/p>\n
This solution does utilize lodash as a method to bind processes together.<\/p>\n
There are some limitations to this however:<\/p>\n