Canvas.Texture

This module exposes the types and functions to load and work with textures.

You can load textures by using toHtmlWith, and use them to draw with Canvas.texture.

Loading Textures

From an external source

type alias Source msg =

Source msg

Origin of a texture to load. Passing a List Source to Canvas.toHtmlWith will try to load the textures and send you events with the actual Texture when it is loaded.

loadFromImageUrl : String -> (Maybe Texture -> msg) -> Source msg

Make a Texture.Source from an image URL. When passing this Source to toHtmlWith the image will try to be loaded and stored as a Texture ready to be drawn.

From existing sources

fromDomImage : Value -> Maybe Texture

Make a Texture from a DOM image.

For example, if you want to make textures out of images you loaded yourself in JS and passed to Elm via ports or flags, you would use this method.

It will make a Texture validating that the Json.Decode.Value is an image that can be drawn. If it isn't, you will get a Nothing back.

Texture types

type alias Texture =

Texture

The Texture type. You can use this type with Canvas.texture to get a Renderable into the screen.

Once you have a texture, you can get a new texture with a viewport into an existing one. This is very useful for when you have a sprite sheet with many images in one, but want to have individual sprites to draw.

sprite :

{ x : Float

, y : Float

, width : Float

, height : Float

}

-> Texture

Make a sprite from a texture. A sprite is like a window into a bigger texture. By passing the inner coordinates and width and height of the window, you will get a new texture back that is only that selected viewport into the bigger texture.

Very useful for using sprite sheet textures.

Texture information

You can get some information from the texture, like its dimensions:

dimensions :

Texture

-> { width : Float

, height : Float

}

Get the width and height of a texture

Modules

Main module

Canvas

Settings

Textures

Canvas.Texture

linsyking/elm-canvas/3.1.0