# How to Draw Without Antialiasing on HTML5 Canvas

First of all, drawing lines without antialiasing is impossible by native canvas api.

like below even if turn **context.imageSmoothingEnabled **off

it doesn’t work for drawing.

But you can experience similar things at the Pixilart.

How they do that? a simple answer is “Draw by stamp”.

`this.context.drawImage(stampImage, Math.round(x), Math.round(y))`

// float number is one of the several causes of antialiasing

unfortunately there’re some gaps between stamps.

so I tweaked with refer to below page’s **Stamp-like** section.

function distanceBetween (point1, point2) {

return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2))

}

function angleBetween (point1, point2) {

return Math.atan2(point2.x - point1.x, point2.y - point1.y)

}const dist = distanceBetween(beginPosition, destPosition)

const angle = angleBetween(beginPosition, destPosition)

for (let i = 0; i < dist; i += 5) {

const x = beginPosition.x + (Math.sin(angle) * i) - halfSizeOfBrush

const y = beginPosition.y + (Math.cos(angle) * i) - halfSizeOfBrush

this.context.drawImage(stampImage, Math.round(x), Math.round(y))

}

But the stamp is static image file yet which made by photoshop, hence I had to make stamp dynamically.

fortunately I knew the **“Bresenham’s line algorithm” **by saw on the first stackoverflow’s page.

and really fantastic user raRaRa already made the demo application of that algorithm.

(btw he’s a software engineer of icelandic company!! I love iceland so much 😍)

this is awesome. I could make a stamp generator refer to implementation of above app.

finally I completed the app that we can draw without antialiasing!

you can try it at https://kozo002.github.io/non-antialias-painting/

I really appreciate for all fantastically smart “senpai” engineers 🙏

and I released px-brush on npmjs.org