Back to Questions
4.4k
views1
comment
Setting FillStyle to CanvasPattern
websharperhtml5canvas

I'm trying to set the FillStyle of a context object to a pattern but the default black isn't altered. How to properly apply a CanvasPattern to the fill style?

1
2
3
4
5
6
7
8
9
10
11
12

[<JavaScript>]
let main() =
    let elt = HTML5.Tags.Canvas []
    let canvas = As<CanvasElement> elt.Dom
    canvas.Width  <- 500
    canvas.Height <- 500
    let ctx = canvas.GetContext "2d"
    let img = Img [Src "/image.png"; HTML5.Attr.Hidden "hidden"]
    let pattern = ctx.CreatePattern(img.Dom, Repetition.Repeat)
    ctx.FillStyle <- pattern                
    ctx.FillRect(0., 0., 500., 500.)
    Div [img; elt]
.

I suspect the issue might be that the image isn't loaded yet when you create the pattern. For the WebGL sample, I had to do something like this:

1
2
3
4
5

Img []
|>! OnLoad (fun img ->
    (* do the rendering here *))
|>! fun img -> img.Append(Src "/image.png") // Load the image after setting the callback
                                            // so we're sure it won't load in the meantime
By on 4/14/2013 7:24 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper