# Pixel art: WebGL vs Canvas?

**URL:** <https://phaser.discourse.group/t/pixel-art-webgl-vs-canvas/13121>\
**Category:** Phaser 3\
**Created:** [April 7, 2023, 4:07pm UTC](https://phaser.discourse.group/t/pixel-art-webgl-vs-canvas/13121 "2023-04-07T16:07:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kraftwer1](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/kraftwer1/32/7539_2.png) [@kraftwer1](https://phaser.discourse.group/u/kraftwer1)\
**Post date:** [April 7, 2023, 4:07pm UTC](https://phaser.discourse.group/t/pixel-art-webgl-vs-canvas/13121/1 "2023-04-07T16:07:35Z")

</div>

I’m creating a pixel art game and I’ve noticed that when using `type.WEBGL`, 1px sometimes ends up rendered in 2px. In `type.CANVAS`, this doesn’t happen. 1px is always 1px and therefore it looks much better and also animates smoother. At least in Firefox. In Chrome, there‘s no difference (1px is sometimes 2px) whereas in Safari, 1px end up blurry.

Are there any drawbacks in using `type.CANVAS`? Any features I can’t use?  
I couldn’t find any docs apart from “If your browser doesn’t support WebGL”…

To illustrate the effect, I drawed two red lines with 1px width each. The same also happens with imported sprites.

WebGL:  
 ![Bildschirmfoto 2023-04-07 um 14.53.04](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/8/83cfb13eab5325104c7ddc81f8dffe21d2d0ded9.png)

Canvas:  
 ![Bildschirmfoto 2023-04-07 um 14.53.12](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/2/2e47d960cccaf8a7cd9a885762fff72a8084b013.png)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 11, 2023, 5:12pm UTC](https://phaser.discourse.group/t/pixel-art-webgl-vs-canvas/13121/2 "2023-04-11T17:12:42Z")

</div>

Are you using Scale Manager zoom or scaling?

With the Canvas renderer there’s no tinting, shader effects, or certain game objects (9-slice, mesh).

---

<div class="post-metadata">

**Author:** ![kraftwer1](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/kraftwer1/32/7539_2.png) [@kraftwer1](https://phaser.discourse.group/u/kraftwer1)\
**Post date:** [April 12, 2023, 8:00am UTC](https://phaser.discourse.group/t/pixel-art-webgl-vs-canvas/13121/3 "2023-04-12T08:00:46Z")

</div>

Since I don’t know Scale Manager, I’m probably not using it. I’ve also noticed that each browser has slightly different rendering results (regardless of Canvas or WebGL).

Thanks for pointing out what I’m about to lose if I stick with Canvas.

I hope WebGPU will provide more consistent results.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 12, 2023, 3:44pm UTC](https://phaser.discourse.group/t/pixel-art-webgl-vs-canvas/13121/4 "2023-04-12T15:44:20Z")

</div>

Also, which kind of game object is it?