basic linear-gradient fill styles for the canvas

[CarstenKoenig]

I can finaly include my simple changes.

I am not fully happy with the changes I had to made (the FillStyle is dependend of the starting-point of the gradient that must be the same as the region you want to fill) - but I had no idea how to do this in any other way. I wanted to keep the way canvas.hs was setup - that means setting the FillStyle as a Attribute (had to change this to write-only as the official canvas-api has no way to read from a FillStyle - only create and change it. It might be possible to recreate the backing haskell data structure but who is to say that this will not break in another canvas-implementation or browswer?)

I also added the beginnings of a very simple game (I want to implement a breakout-clone using this) - it's just enough to show a very simple linear-gradient (in the paddle) and let the paddle move with the mouse.

It is build just every other example.

Let me know if I should remove this or wait till it's really done.

Thanks for fixing the issues!

[HeinrichApfelmus]

Sorry for taking so long to review this.

The game is awesome. :smile: However, I am again not sure whether it's a good idea to include with the examples -- I would have to maintain it. Maybe it's best as an independent project?

That said, the breakout clone highlights some issues with Threepenny. Sometimes, the game freezes for a long time before continuing. Also, the stone blocks sometimes have a red flicker. I will have a look.

---

Concerning the gradient code, there are a few changes I'd like to make:

• I take that you use fillRects for speed? It's fine as a special purpose function, but I'd prefer to not include it in the official API. In a sense, it also goes beyond the capabilities of the rather simple JavaScript FFI. For more advanced JS integration, we should probably use the sunroof project -- or wait for Haskell -> JS compilation.
• The naming convention for createLinearGradient follows the JS convention, but I'd name it linearGradient instead.
• The type Gradient is best represented as a record type. This way, the individual field can be documented similar to how the parameters of a function can be documented individually.

[CarstenKoenig]

Agreed you are most certainly right.

Concerning the lag/flashes: the lag is only slightly on my system with chromium, a bit more with firefox - I don't really know whats going on - maybe some kind of GC(?)

I think the flashes may indicate that the "fillstyle" is not set when I paint the background (I tried to use some simulated double-buffering, where I fill the complete background with a almost opaque white - to get some kind of blur effect I like to use so that the ball does not look as sharp and the eye don't stutter so much as it follows along - as I fill the bricks in red I think that the fillstyle is not set sometimes.

And yes - I had to include the multi-drawing - you can try for yourself, if you don't do anything like this the lag is incredible (there are quite a few rects drawn each frame).

I don't know the sunroof project but I will try to investigate a bit. My thought was to use something like a writer-monad to draw the scene in a DSL and then send the complete code as a block into javascript but again you are surely right: this should be used with Fay or GHJS or not at all ... guess I got carried away.

I will remove the game again and try to include your changes and reissue the pull-request again if you like - but maybe I'll need a few days for this.

[HeinrichApfelmus]

I will remove the game again and try to include your changes and reissue the pull-request again if you like - but maybe I'll need a few days for this.

That would be great! But do keep the game on github somewhere, I like it.

[CarstenKoenig]

ok - I removed the game (it's for now included here: https://github.com/CarstenKoenig/threepenny-gui/tree/breakout - maybe I should extract this into it's own project - I think I will do this as soon as the next develop branch goes live), and I changed the naming and the Gradient data type.

[HeinrichApfelmus]

Sorry for the long wait. I have finally merged the Canvas stuff. Thanks!