# Draw pixels to canvas

**URL:** <https://forum.defold.com/t/draw-pixels-to-canvas/8644>\
**Category:** Questions\
**Created:** [May 25, 2017, 2:12am UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644 "2017-05-25T02:12:34Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [May 25, 2017, 2:12am UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/1 "2017-05-25T02:12:34Z")

</div>

I seem to remember there being a planned way to do this nicely… can we get more details about it if this is a real thing and I’m not hallucinating it?

Edit: I was thinking of the buffers feature .

> [@Native Extensions](https://forum.defold.com/t/native-extensions/4946/19):
>
> Hi everyone! As promised, we’ve cleaned up and shared two native extension examples on github. You can find them here: [Camera](https://github.com/defold/extension-camera)[Video Player](https://github.com/defold/extension-videoplayer) Hopefully, we can share more examples soon. NOTE: As mentioned in their readme’s, you should view these as (working) examples. Although we aim to keep them working and show some good practices on how to do things with Lua + extensions, at this point we will maintain them as just that, examples.

@Mathias_Westerdahl

> [@Native Extensions](https://forum.defold.com/t/native-extensions/4946/20):
>
> HI there! Heres another small update: We are continuing our work on the Android support, which is well underway, but still have some way to go before it’s considered fully working. Also, we are working on a Lua api for our new “buffers”. The native extensions communicate with the engine via Lua, and with the help of our new buffers, they can pass large memory chunks between each other without doing memory duplication. With this Lua api, it will be possible to create such buffers directly from…

Is code from this demo anywhere?

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [May 25, 2017, 2:31am UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/2 "2017-05-25T02:31:41Z")

</div>

So we use buffer and resource to create texture buffers and modify them on the fly per pixel?

> **[API reference (Buffer)](https://defold.com/ref/buffer/)**
>
> Defold is a free and open game engine used for development of console, desktop, mobile and web games.

> **[API reference (Resource)](https://defold.com/ref/resource/)**
>
> Defold is a free and open game engine used for development of console, desktop, mobile and web games.

It should be possible to make something like Pico-8 in Defold right now..

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [May 25, 2017, 3:03am UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/3 "2017-05-25T03:03:29Z")

</div>

When I test this example

```lua
function init(self)
  self.height = 128
  self.width = 128
  self.buffer = buffer.create(self.width * self.height, { {name=hash("rgb"), type=buffer.VALUE_TYPE_UINT8, count=3} } )
  self.stream = buffer.get_stream(self.buffer, hash("rgb"))

  for y=1,self.height do
      for x=1,self.width do
          local index = (y-1) * self.width * 3 + (x-1) * 3 + 1
          self.stream[index + 0] = 0xff
          self.stream[index + 1] = 0x80
          self.stream[index + 2] = 0x10
      end
  end

  local resource_path = go.get("#sprite", "texture0")
  local header = { width=self.width, height=self.height, type=resource.TEXTURE_TYPE_2D, format=resource.TEXTURE_FORMAT_RGB, num_mip_maps=1 }
  resource.set_texture( resource_path, header, self.stream )
end

```

I get

```lua
ERROR:SCRIPT: /examples/tools/texture_buffer_swap/buffer_controller.scrip:18: bad argument #3 to 'set_texture' (buffer expected, got userdata)
stack traceback:
	[C]: in function 'set_texture'
	/examples/tools/texture_buffer_swap/buffer_controller.scrip:18: in function </examples/tools/texture_buffer_swap/buffer_controller.scrip:1>

```

Still testing

It should work with sprites?

```lua
function update(self)
    -- copy the data from the texture of sprite1 to sprite2
    local buffer = resource.load(go.get("#sprite1", "texture0"))
    resource.set( go.get("#sprite2", "texture0"), buffer )
end

```

Gives

```lua
ERROR:SCRIPT: /examples/tools/texture_buffer_swap/buffer_controller.scrip:2: bad argument #1 to 'load' (string expected, got userdata)
stack traceback:
	[C]: in function 'load'
	/examples/tools/texture_buffer_swap/buffer_controller.scrip:2: in function </examples/tools/texture_buffer_swap/buffer_controller.scrip:1>

```

I’m on Windows 10 at the moment. I’ll test on Mac soon. Maybe not working because Windows doesn’t have native extensions yet??

Edit: Didn’t work on Mac either.

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [May 25, 2017, 9:05am UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/4 "2017-05-25T09:05:25Z")

</div>

> [@Pkeod](#):
>
> resource.set\_texture( resource\_path, header, self.stream )

The API reference example is incorrect @sicher . It should be

`resource.set_texture( resource_path, header, self.buffer )`

I’ve reported the issue.

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [May 25, 2017, 9:09am UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/5 "2017-05-25T09:09:13Z")

</div>

What about the second example?

```lua
	local buffer = resource.load(go.get("#sprite1", "texture0"))

```

```lua
ERROR:SCRIPT: /examples/tools/texture_buffer_swap/buffer_controller.scrip:2: bad argument #1 to 'load' (string expected, got userdata)
stack traceback:
	[C]: in function 'load'
	/examples/tools/texture_buffer_swap/buffer_controller.scrip:2: in function </examples/tools/texture_buffer_swap/buffer_controller.scrip:1>
INFO:DLIB: SSDP: Started on address 169.254.19.187
INFO:DLIB: SSDP: Started on address 169.254.108.130

```

Doing tostring() seems to make it go one step further but I strongly doubt that’s right to do…

```lua
DEBUG:SCRIPT: hash: [build/default/_generated_e27b97ae.texturec]
ERROR:RESOURCE: Resource path is not absolute (hash: [build/default/_generated_e27b97ae.texturec])
ERROR:SCRIPT: /examples/tools/texture_buffer_swap/buffer_controller.scrip:5: The resource was not found: 9327522419242501489, hash: [build/default/_generated_e27b97ae.texturec]
stack traceback:
	[C]: in function 'load'
	/examples/tools/texture_buffer_swap/buffer_controller.scrip:5: in function </examples/tools/texture_buffer_swap/buffer_controller.scrip:1>

```

The first example still doesn’t seem right.

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [May 25, 2017, 9:51am UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/6 "2017-05-25T09:51:11Z")

</div>

I’m uncertain about the whole stream format that I get back. I’m trying to draw/modify pixels of the stream that I’ve created and then set them on the sprite, but the format seems weird. The API example works since it’s a fixed width and height and all of the pixels are set to the same value.

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [May 25, 2017, 11:41pm UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/7 "2017-05-25T23:41:55Z")

</div>

Is the source from this demo anywhere? It might help.

> [@Native Extensions](https://forum.defold.com/t/native-extensions/4946/20):
>
> HI there! Heres another small update: We are continuing our work on the Android support, which is well underway, but still have some way to go before it’s considered fully working. Also, we are working on a Lua api for our new “buffers”. The native extensions communicate with the engine via Lua, and with the help of our new buffers, they can pass large memory chunks between each other without doing memory duplication. With this Lua api, it will be possible to create such buffers directly from…

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [May 26, 2017, 10:43am UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/8 "2017-05-26T10:43:39Z")

</div>

I’ve uploaded the example [here](https://github.com/JCash/defoldexamples/tree/master/main/bufferparticles).

One important thing to note is that when you call `resource.set_texture()`, you are replacing the _entire_ texture. So, if you have more than one texture in the atlas, beware that the sprites’ texture coordinates will stay the same as before! That’s why I have an atlas with only one texture in it, to make it simple.

 ![](https://forum-defold.b-cdn.net/uploads/default/original/2X/d/dab80f73550bacfbf9071608d3025d92e0c89fcd.png)

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [May 26, 2017, 10:58am UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/9 "2017-05-26T10:58:45Z")

</div>

Thank you for sharing this. That does make sense about the entire texture being replaced.

Some goals:

1. Make small pixel art editor that can save and load files.
2. Render screen to texture and then be able to add extra textures on top then send the screenshot to a server, save to disk, or share with social features on phones.
3. Make general shape drawing lib.
4. Make a tool which can take buffer information from certain positions and draw to a display texture.
5. Make graphing calculator clone.

But thing I’m most excited about is making a mini pico-8 type thing in Defold. Can have most things in pure code, and just draw to a single texture that is only so many pixels large.

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [May 26, 2017, 8:22pm UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/10 "2017-05-26T20:22:51Z")

</div>

Any idea why resource.load isn’t working? I’d like to be able to get the texture data of an existing texture and put it into a buffer.

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [May 26, 2017, 8:24pm UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/11 "2017-05-26T20:24:08Z")

</div>

The first demo wasn’t working for me before in part too because I had a sprite set to a custom material with a sampler. Just need to get resource.load working now.

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [May 26, 2017, 8:49pm UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/12 "2017-05-26T20:49:42Z")

</div>

Seems to work pretty fast for smaller textures. Doing fullscreen size updates is super slow though. I hope that the smaller texture size works fast enough on mobile.

Custom materials work only if you do not set a mipmap option in the sampler.

 ![](https://forum-defold.b-cdn.net/uploads/default/original/2X/5/5f722b1a447688708b1a1d38dbe86ea0a475f9cb.png)

 ![](https://forum-defold.b-cdn.net/uploads/default/original/2X/3/389abc4f4a8d8773efb7f0e7723e29d3efd039ee.png)

[https://gfycat.com/HastyUnkemptDalmatian](https://gfycat.com/HastyUnkemptDalmatian)

In engine it’s faster than the above.

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [May 27, 2017, 7:15pm UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/13 "2017-05-27T19:15:40Z")

</div>

I played around with the buffer API and created a simple paint application:

DEMO: [Draw Pixels 0.0](http://britzl.github.io/publicexamples/draw_pixels/index.html)  
CODE: [publicexamples/examples/draw\_pixels at master · britzl/publicexamples · GitHub](https://github.com/britzl/publicexamples/tree/master/examples/draw_pixels)

It would be kinda fun to expand this to a proper paint application with save/load functionality.

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [May 27, 2017, 10:28pm UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/14 "2017-05-27T22:28:07Z")

</div>

There are existing Lua encoders / decoders out there for jpeg, png and so shouldn’t be too difficult!

Doing playback of audio through constructed / loaded buffers would be cool too… Then we could draw the waveforms with this and play them back.

Making a simple 8x8 pixel art tool with preset color palettes. Then will setup animation for frames. Lots of cool possibilities.

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [June 8, 2017, 4:39am UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/15 "2017-06-08T04:39:16Z")

</div>

> [@Pkeod](#):
>
> local buffer = resource.load(go.get(“#sprite1”, “texture0”))

Any idea about getting this to work?

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [June 8, 2017, 9:18am UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/16 "2017-06-08T09:18:25Z")

</div>

Ah, sorry, I forgot. Using a hash for resource.load() is a reported issue DEF-2482, eta unknown.

---

<div class="post-metadata">

**Author:** ![AGulev](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/agulev/32/4541_2.png) [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [June 13, 2018, 7:09pm UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/17 "2018-06-13T19:09:58Z")

</div>

> [@Mathias\_Westerdahl](#):
>
> here

As I understand, I can not get the current sprite buffer and make some changes there?

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [June 13, 2018, 9:06pm UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/18 "2018-06-13T21:06:40Z")

</div>

No, not yet I’m afraid.

---

<div class="post-metadata">

**Author:** ![AGulev](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/agulev/32/4541_2.png) [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [June 14, 2018, 6:46am UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/19 "2018-06-14T06:46:13Z")

</div>

ok, i’ll try to work around it using PNG extension by @britzl , thanks

---

<div class="post-metadata">

**Author:** ![piXelicidio](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pixelicidio/32/26074_2.png) [@piXelicidio](https://forum.defold.com/u/piXelicidio)\
**Post date:** [June 5, 2019, 9:50pm UTC](https://forum.defold.com/t/draw-pixels-to-canvas/8644/20 "2019-06-05T21:50:36Z")

</div>

Like this way of thinking, is what makes Defold full of little hidden gems.  
Pixel access is most time obscured on other engines. And I always like to have the option to play with pixels, that make me feel nostalgic for the old times when I was drawing directly to the CGA memory using Turbo Pascal 🙂