Minimum working example for using Canvas or WebGL?


#1

Has anyone successfully been able to get a Canvas or WebGL context in a package? I’m interested in exploring what can be done with respect to code visualization.


#2

Have you tried? They should be available like any other HTML.


#3

I created an example for you. Look at the canvas branch of the repo at https://github.com/mark-hahn/html-tab.

You can run it by cloning the branch into your packages folder, running apm install inside the project folder, and then running the command html-tab:open.


#4

Thanks, Mark. I appreciate you putting in the time to create the example.

I would have simply tried it, but I had been holding off on investing the time to learn the Atom package architecture until the API settled down. It looks like now is the time!


#5

Actually you don’t have to. Just look at the source. It is tiny and works. I just did it out of curiosity.


#6

The minimap package use a canvas with a context2d for rendering the minimap, the whole canvas rendering can be found in the CanvasDrawer mixin if you need more examples.


#7

In case you’re still interested: I created an experimental canvas-based Atom package, which allows you to draw on images: https://atom.io/packages/draw-on-image
It’s my first CoffeeScript project so the code might not be perfect :wink: