Implement more canvas functions

microsoft / HoloJS

Provides a framework for creating holographic apps using JavaScript and WebGL.

MIT License

1.19k stars 114 forks source link

Implement more canvas functions #164

Closed donghaoren closed 6 years ago

donghaoren commented 6 years ago

Hi, I'm working on a visualization project in which I want to render 2D charts on the canvas. The current canvas implementation doesn't support any 2D drawing, so I implemented a subset of them. Currently it's able to render a many charts from Vega examples: https://vega.github.io/vega/examples/.

I think the code formatting is changed because my Visual Studio is doing that in a different way...

-Donghao

msftclas commented 6 years ago

All CLA requirements met.

Almost-Done commented 6 years ago

Thank you for your contribution Donghao! Before this can be merged you will have to sign the contributor agreement.

To fix formatting, you can install the clang-format extension for Visual Studio, open the C++ source file in Visual Studio and type Ctrl+R then Ctrl+D. This will auto-format the document to the project style. Do not run clang-format on JavaScript.

donghaoren commented 6 years ago

Thanks for the hint! I'll check it tomorrow. There's also some console.log stuff to remove.

donghaoren commented 6 years ago

The code has been formatted. Here's a list of new Canvas features:

Most path functions: beginPath, closePath, moveTo, lineTo, arc, bezierCurveTo, quadraticCurveTo
Drawing functions: stroke, fill
Transform stack: transform, translate, rotate, scale, resetTransform, setTransform
State saving (only support transform right now): save, restore
lineCap and lineJoin
Font now supports styles (italic, bold)
measureText
Color specification supports "transparent" and css named colors
toDataURL now supports transparency
Not implemented functions will either print a warning or throw an error.

I didn't test if the changes breaks any existing demos. Be sure to test them.

Almost-Done commented 6 years ago

Donghao, thank you for this contribution!

I created the branch develop/canvas-2d-fixes with your commits + one of my commits that fixes the existing canvas sample and addresses some of the feedback I left here. Please try this combined branch and make sure it still works for your needs after my changes.

https://github.com/Microsoft/HoloJS/commit/72ca2723e50e7268638c4d8bdaeed0fa61cf2453

There are a lot of trivial compiler warning fixes but the main changes are:

Use global alpha for gradient and drawImage
Leave alpha pre-multiplied and use 24bpp format for the toDataURL method
Un-premultiply for getImageData

donghaoren commented 6 years ago

Thanks for the code review! I'll check it next Monday. For the toDataURL method, I'll make it use 24bpp for JPEG and 32bpp for PNG if that's okay for you.

Almost-Done commented 6 years ago

This is now merge into master. Thank you Donghao!

donghaoren commented 6 years ago

Thank you for making this great project! It really helps a lot!