Jump to content


Is BitmapData or Equivalent Possible in JS Yet?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Been holding out and feel like a n00b all over again, desperately awaiting making the transition from Flash to JS/HTML5 but not clear on how to capture and manipulate BitmapData yet.  


Capture Image Data

I have to capture Image Data for things like cropping a composition of multiple custom user-placed images/text/graphics and export it / save it to the server at the end of my drawing application (currently only in Flash and needing to port for mobile).  I can handle the writing to the server with a PHP API easily, but how to capture image data and send in the best way.......  that's where I'm foggy without my trusty beloved AS3 BitmapData()  and Bitmap() classes and their killer functions.


Short and Sweet?

$('#someElementOrCanvas').drawBitmap(w,h,matrixTransforms); // or similar would be (more than) cool.


GSAP Alone?

Is this GSAP library already there now to help do this kind of image data stuff?  


GSAP + ____ .... Raphael?

Or, does another library come to mind that would play nice and plug in lightly with this to accomplish bitmap data capture or draw functions with transforms, or am I getting too needy already for this version of GASP/JS?  haha  RaphaelJS?  Other?




Thanks a lot.   :-D



  • Like 1
Link to comment
Share on other sites

Yeah, in order to do any bitmap manipulation you will need to work with canvas.

Check this tutorial out: http://net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-pixel-manipulation/


This isn't something the GSAP library currently handles, but there should be plenty of canvas libraries out there that make it a bit easier.

  • Thanks 1
Link to comment
Share on other sites

Ok Thanks Carl I will check this out - thanks for the tutorial link. I really enjoyed past "Smooth Image Loader" and similar BMP Data handling classes in GS AS3.  So, I'll use this method and look forward to any BMP classes or utilities you guys put out in the future.



Link to comment
Share on other sites

  • 4 years later...

Man a lot has changed since this last post... 4+ years ago.

I wonder what your take is on this now.


HTML5 Canvas is OK, but the world of SVG is much more fun these days and support for it is great.  I prefer SVG over Canvas and there are filters that have bitmap style effects with vector rendering it seems.  I use Fabric JS a lot and am considering more of a SVG + Greensock as a huge upgrade.  You still can't really animate that well in Canvas performance wise yet... right?  But SVG tweens seem pretty smooth from what I've tested...

Link to comment
Share on other sites

My advice, don't try and favor one format over the other. Use the right tool for the job. Learn SVG. It's very useful. So is canvas. And GSAP plays nicely with both.


I see a lot of people wanting to only learn SVG because it's easier, but then end up trouble when up in trouble when they reach its performance limits, and have to eliminate some features or start completely over with canvas.


Some things people don't realize about canvas...


It's drawing commands are completely vector based. SVG is just some XML and a spec. The way SVG gets rendered in the browser is based mostly on how canvas works. That's why you'll find the same rendering glitches in both formats, like this one in Firefox and Safari.


See the Pen ed2f14b6fe1cc612e18b67aea9c68281 by osublake (@osublake) on CodePen


You can draw and hit test SVG Paths.


See the Pen dzYzab by osublake (@osublake) on CodePen


And you can use CSS and SVG filters.


See the Pen aLrXzw by osublake (@osublake) on CodePen



But if you like filters, you should check out PixiJS. There's even a GSAP plugin for it.



I'm not trying to make a case for canvas in this post. Just trying to show how canvas and SVG can compliment each other, so it's good to know both.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.