![]() Calling another fillRect command actually draws rectangle on top of whatever is already drawn on canvas. What if at some point, we wanted to move that now-familiar red rectangle to a slightly different location on canvas? How would we do this without being able to operate on objects? Would we just call another fillRect on a canvas bitmap? I'm sure you're starting to see exactly why Fabric exists and how much low-level boilerplate it hides.īut let's take a look at yet another example - keeping track of canvas state. As a bonus exercise, we had to translate degrees to radians when rotating canvas bitmap. We then draw rectangle again, but remembering to offset bitmap properly (-10, -10), so that it's still rendered at the point of 100,100. Instead, we tweak positioning and angle of entire canvas bitmap ( ctx.translate, ctx.rotate) to suit our needs. Remember that we can't operate on objects. With native methods however, things become much more “fun”. First, using native methods:Īll we had to do in Fabric is change object's “angle” value to 45. We could have at least made something fun with it! Perhaps, rotate slightly? You can see that these objects are first-class citizens in Fabric land.īut rendering plain red rectangle is just so boring. In Fabric, we operate on objects - instantiate them, change their properties, and add them to canvas. With native methods, we operate on context - an object representing entire canvas bitmap. However, you can already see how different the approach to working with canvas is. create a wrapper around native canvas element (with id="c")Īt this point, there's almost no difference in size - the two examples are pretty similar. Now, let's take a look at doing the same with Fabric: create rectangle at a 100,100 point, with 20x20 dimensions get 2d context to draw on (the "bitmap" mentioned earlier) Var canvasEl = document.getElementById('c') reference canvas element (with id="c") Here's how we would do this with native API. Let's say we want to draw a red rectangle somewhere on canvas. Let's take a look at a simple example demonstrating this difference. It takes care of canvas state and rendering, and lets us work with “objects” directly. Instead of operating on such low level, Fabric provides simple but powerful object model on top of native methods. It's as if we're painting canvas with a brush, layering more and more oil on top, with very little control. Want to draw a line? Use a combination of moveTo(left, top) and lineTo(x, y). Want to draw a rectangle? Use fillRect(left, top, width, height). Native canvas methods only allow us to fire off simple graphic commands, blindly modifying entire canvas bitmap. But as soon as there's need for any kind of interaction, change of picture at any point, or drawing of more complex shapes - situtation changes dramatically. It's one thing if we simply want to draw few basic shapes on canvas and forget about them. But the API it provides is disappointingly low-level. Even right now, very few come close to what became possible with Fabric.Ĭanvas allows us to create some absolutely amazing graphics on the web these days. The kind of interactivity they wanted only existed in Flash apps in those days. The original author was creating an interactive design editor for - his startup that allows users to design their own apparel. It is a fully open-source project, licensed under MIT, with many contributions over the years.įabric started around 2010, after discovering the pains of working with native canvas API. Fabric provides a missing object model for canvas, as well as an SVG parser, layer of interactivity, and a whole suite of other indispensable tools. Today I'd like to introduce you to Fabric.js - a powerful Javascript library that makes working with HTML5 canvas a breeze.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |