6 ms·

Node-canvas. Server side HTML5 canvas implementation in node.js

93 points by Rauchg 16y ago

wccrawford 16y ago
Not HTML5. HTML5 Canvas. Makes a little more sense when you put that back in the title.
- Rauchg 16y ago
  HN filtered out `<canvas>`
yatsyk 16y ago
Cool, combine this with canvg and render SVG for lame browsers on server. We can render YUI, jQuiery, canvas, SVG (possibly with some adjustments) in node.
gurraman 16y ago
Visiting site consistently crashes safari ipad here (3.2.2).
nkassis 16y ago
I don't know how hard it would be but I've been thinking it would be cool to have a WebGL implementation in node. Desktop gl apps using webgl would sorta cool but dunno about real use cases.
- xorglorb 16y ago
  Node.js is mainly designed for the server-side, so desktop apps are not a high priority right now.
- passerby-webgl 16y ago
  It's been started: https://github.com/pufuwozu/node-webgl https://github.com/pufuwozu/node-webgl And there's also a similar project, much further along, to put all of OpenGL in V8: https://github.com/philogb/v8-gl https://github.com/philogb/v8-gl
  - pufuwozu 16y ago
    If anyone wants to help out, feel free to fork my node-webgl project. It'd be really good to update the WebGL arrays to the new specification. The v8-gl project is fairly different. I'm trying to emulate the whole WebGL API rather than just provide OpenGL bindings.
Vekz 16y ago
Cool. Could this replace image manipulation libraries like ImageMagick? You could handle your image manipulation using the canvas api and have node deliver the result.
- liuliu 16y ago
  ImageMagick doesn't have a very fast image processing implementation. Granted, I suspect that even the fastest canvas image manipulation implementation (such as Pixastic) cannot beat ImageMagick in speed.
drags 16y ago
I love this idea, but I'm almost always using canvas with a bunch of click/hover handlers. If I export as a PNG I lose the ability to make things interactive. Is there any way to couple the performance advantages of server-side processing canvas with the interactivity you get through the native implementations?
- grayrest 16y ago
  I get the feeling I'm missing something, but... var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0); } img.src = 'path/to/the/nodejs/generated/image.png';
geuis 16y ago
This will be really fantastic when it gets freetype support to load ttf fonts.
- copperred 16y ago
  typeface.js?
olalonde 16y ago
Wouldn't it be better if Node.js was based on Webkit (not only the V8 engine) so they don't have to reinvent the wheel for every HTML5 spec? Is it to encourage the idea that Javascript doesn't have to be tied to a browser environment? Would it be too complex to maintain?
- WesleyJohnson 16y ago
  I don't think Node is necessarily encouraging the idea that JavaScript doesn't need to be tied to a browser, but it does indeed demonstrate that very well. While I don't have a deep understanding of WebKit or the internals of how any browser works, I'm pretty sure V8 and WebKit are entirely separate as they should be. For instance, I don't believe Safari uses V8 even though it's built on WebKit. WebKit is more about parsing and displaying HTML, handling CSS, and interacting with DOM events. V8 is about parsing and executing JavaScript, regardless of environment. Node to mention, you can use Node to program servers that have nothing to do with HTML or a browser.
JamesRobinson 16y ago
The title is a bit misleading. This is an implementation of the canvas 2d API that cairo for everything (the same graphics library that Firefox uses). It's not a pure JS implementation of all of the rasterization logic.
- tjholowaychuk 16y ago
  why would you expect it to be pure js?
copperred 16y ago
Cool. I've been accomplishing the same thing by using Jaxer in my application and it works pretty well. I have a canvas based drawing app on top of a background image and the composite image can be downloaded by the user. I transfer the drawing to the server side, render, composite, and return the output. Works on IE (with excanvas) as well.

93 points by Rauchg 16y ago

wccrawford 16y ago

Not HTML5. HTML5 Canvas. Makes a little more sense when you put that back in the title.

Rauchg 16y ago
HN filtered out `<canvas>`

yatsyk 16y ago

Cool, combine this with canvg and render SVG for lame browsers on server. We can render YUI, jQuiery, canvas, SVG (possibly with some adjustments) in node.

gurraman 16y ago

Visiting site consistently crashes safari ipad here (3.2.2).

nkassis 16y ago

I don't know how hard it would be but I've been thinking it would be cool to have a WebGL implementation in node. Desktop gl apps using webgl would sorta cool but dunno about real use cases.

xorglorb 16y ago
Node.js is mainly designed for the server-side, so desktop apps are not a high priority right now.
passerby-webgl 16y ago
It's been started: https://github.com/pufuwozu/node-webgl https://github.com/pufuwozu/node-webgl And there's also a similar project, much further along, to put all of OpenGL in V8: https://github.com/philogb/v8-gl https://github.com/philogb/v8-gl
- pufuwozu 16y ago
  If anyone wants to help out, feel free to fork my node-webgl project. It'd be really good to update the WebGL arrays to the new specification. The v8-gl project is fairly different. I'm trying to emulate the whole WebGL API rather than just provide OpenGL bindings.

Vekz 16y ago

Cool. Could this replace image manipulation libraries like ImageMagick? You could handle your image manipulation using the canvas api and have node deliver the result.

liuliu 16y ago
ImageMagick doesn't have a very fast image processing implementation. Granted, I suspect that even the fastest canvas image manipulation implementation (such as Pixastic) cannot beat ImageMagick in speed.

drags 16y ago

I love this idea, but I'm almost always using canvas with a bunch of click/hover handlers. If I export as a PNG I lose the ability to make things interactive. Is there any way to couple the performance advantages of server-side processing canvas with the interactivity you get through the native implementations?

grayrest 16y ago
I get the feeling I'm missing something, but... var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0); } img.src = 'path/to/the/nodejs/generated/image.png';

geuis 16y ago

This will be really fantastic when it gets freetype support to load ttf fonts.

copperred 16y ago
typeface.js?

olalonde 16y ago

Wouldn't it be better if Node.js was based on Webkit (not only the V8 engine) so they don't have to reinvent the wheel for every HTML5 spec? Is it to encourage the idea that Javascript doesn't have to be tied to a browser environment? Would it be too complex to maintain?

WesleyJohnson 16y ago
I don't think Node is necessarily encouraging the idea that JavaScript doesn't need to be tied to a browser, but it does indeed demonstrate that very well. While I don't have a deep understanding of WebKit or the internals of how any browser works, I'm pretty sure V8 and WebKit are entirely separate as they should be. For instance, I don't believe Safari uses V8 even though it's built on WebKit. WebKit is more about parsing and displaying HTML, handling CSS, and interacting with DOM events. V8 is about parsing and executing JavaScript, regardless of environment. Node to mention, you can use Node to program servers that have nothing to do with HTML or a browser.

JamesRobinson 16y ago

The title is a bit misleading. This is an implementation of the canvas 2d API that cairo for everything (the same graphics library that Firefox uses). It's not a pure JS implementation of all of the rasterization logic.

tjholowaychuk 16y ago
why would you expect it to be pure js?

copperred 16y ago

Cool. I've been accomplishing the same thing by using Jaxer in my application and it works pretty well. I have a canvas based drawing app on top of a background image and the composite image can be downloaded by the user. I transfer the drawing to the server side, render, composite, and return the output. Works on IE (with excanvas) as well.