0

I am using a library for drawing Normal-Mapped images on a HTML-Canvas. It does so with Web-GL Acceleration. (NormalMap.js)

However, I would also like to draw onto the canvas using a 2D Canvas Context (Rects, images, text, etc).

How can this be achieved? The library fails to work if a 2D Context is created, throwing the error webgl not supported!(without the second context the library functions perfectly.)

One way to do this might be to overlay another transparent canvas, but is there a better way?

Thank you!

Fuzzyzilla
  • 356
  • 4
  • 15
  • You can render the webGL canvas onto a 2D canvas via the 2D API. Just get the 2D context for the displayed canvas, and just hold the webGL canvas in memory. This https://stackoverflow.com/a/38966946/3877726 shows a webGL canvas rendered and then drawn on a second canvas via the 2D API. – Blindman67 Jun 26 '17 at 23:52
  • You might have got an issue while doing your edit – Kaiido Jun 27 '17 at 04:33
  • https://maximumroulette.com/webgl2 find example for texture porting . You can use canvas 2d for draws and hide it then use image from canvas2d for texture in webgl . – Nikola Lukic Jun 27 '17 at 06:28
  • 1
    @NikolaLukic Yeah, I'm afraid that looks like the best option. To me, it seems a bit hack-y, but hey, this is programming... – Fuzzyzilla Jun 27 '17 at 18:23
  • it is ;) Take a look at : https://bitbucket.org/nikola_l/visual-js/overview In this project you can found 3 version of graphic language. Canvas2D , webGL also webGL2 all are standalone part but you can compine them .For 2d part you can found examples also for webgl2. (in canvas2D you can draw custom - any native example look at examples) – Nikola Lukic Jun 28 '17 at 12:07

0 Answers0