# Drawing texture on canvas will cause the Sawtooth by WebGL

**URL:** <https://discourse.threejs.org/t/drawing-texture-on-canvas-will-cause-the-sawtooth-by-webgl/5953>\
**Category:** Questions\
**Tags:** textures\
**Created:** [January 31, 2019, 9:50am UTC](https://discourse.threejs.org/t/drawing-texture-on-canvas-will-cause-the-sawtooth-by-webgl/5953 "2019-01-31T09:50:43Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![trymoremore](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trymoremore/32/1855_2.png) [@trymoremore](https://discourse.threejs.org/u/trymoremore)\
**Post date:** [January 31, 2019, 9:50am UTC](https://discourse.threejs.org/t/drawing-texture-on-canvas-will-cause-the-sawtooth-by-webgl/5953/1 "2019-01-31T09:50:44Z")

</div>

I draw a texture on canvas by the WebGL. The original size of texture is 1024x1000 and the size of texture have drawn on canvas is : 256x250. There is Sawtooth around the edge :  
 ![screen](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/3676f8cdfb8d112a8a0c0cf3901e65c579d5cfe5.png)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 31, 2019, 9:54am UTC](https://discourse.threejs.org/t/drawing-texture-on-canvas-will-cause-the-sawtooth-by-webgl/5953/2 "2019-01-31T09:54:44Z")

</div>

I suggest you increase the resolution of your canvas in order to mitigate the aliasing effect. Besides, ensure your texture is 1024x1024 so `three.js` does not have to resize your texture.

In any event, providing a [live example](https://jsfiddle.net/f2Lommf5/) with your code will make it easier for the community to give adequate feedback.

---

<div class="post-metadata">

**Author:** ![trymoremore](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trymoremore/32/1855_2.png) [@trymoremore](https://discourse.threejs.org/u/trymoremore)\
**Post date:** [January 31, 2019, 10:19am UTC](https://discourse.threejs.org/t/drawing-texture-on-canvas-will-cause-the-sawtooth-by-webgl/5953/3 "2019-01-31T10:19:42Z")

</div>

[web.zip](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/4603421b1d79667351bd5dc287918025c0415b0e.zip) (72.0 KB)  
it’s my code, and what i want is put the canvas into a div,so i can’t change the size of canvas arbitrarily.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 31, 2019, 12:46pm UTC](https://discourse.threejs.org/t/drawing-texture-on-canvas-will-cause-the-sawtooth-by-webgl/5953/4 "2019-01-31T12:46:07Z")

</div>

Two things:

- Your code does not use `three.js` at all. Is this intended?
- When using mipmapping and the respective texture filtering, your texture will be more sharp.

Here is a `three.js` demo: [https://jsfiddle.net/6sxu9m5d/](https://jsfiddle.net/6sxu9m5d/)

---

<div class="post-metadata">

**Author:** ![trymoremore](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trymoremore/32/1855_2.png) [@trymoremore](https://discourse.threejs.org/u/trymoremore)\
**Post date:** [February 1, 2019, 6:23am UTC](https://discourse.threejs.org/t/drawing-texture-on-canvas-will-cause-the-sawtooth-by-webgl/5953/5 "2019-02-01T06:23:29Z")

</div>

thank you very much! i am trying something in morph the 2Dtexture,it seems thar THREE.JS does not exist some API about this, so i tried the webGL directly.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [February 1, 2019, 2:57pm UTC](https://discourse.threejs.org/t/drawing-texture-on-canvas-will-cause-the-sawtooth-by-webgl/5953/6 "2019-02-01T14:57:06Z")

</div>

> [@trymoremore](#):
>
> i am trying something in morph the 2Dtexture,

What do you mean by that? Can you please explain a bit?