How to embed canvas elements into browser.elements?

Learn
1

Hello, everyone, im trying to embed this element into my main.elm file but i just get white canvas with black borders.

module App.Canvas exposing (..)

import Canvas exposing (..)
import Color
import Html exposing (Html)
import Html.Attributes exposing (style)

view : Float -> Float -> Html msg
view x y =
    let
        width = 500
        height = 300
        debug = Debug.log (String.fromFloat x)
    in
        Canvas.toHtml (width, height)
            [ style "border" "1px solid black" ]
            [ shapes [ fill Color.red ] [ rect (x*10, y*10) width height ]
            , renderSquare
            ]

renderSquare =
  shapes [ fill (Color.rgba 0 0 0 1) ]
      [ rect (0, 0) 100 50 ]

main = view 1.0 1.0

here’s part of my View in main

        ,div []
        [(App.Canvas.view model.position.x model.position.y)]

is there any tutorials besides 10 lines of 3 words in joakin/elm-canvas docs?

2

Here are some more working examples using joakin/elm-canvas:

https://discourse.elm-lang.org/t/some-p5js-org-examples-in-elm/3781

Therein are two simple examples - form points and lines & form shape primitives

1 Like
3

Well that is painful to read after all the time I’ve spent on the docs…

Have you even read the main page of the package?

First text after the images is the usage with very clear instructions, an Ellie example/template, a github repo example/template, and other more detailed instructions and links to examples below.

What more would you expect?

1 Like
4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.