2

I'm currently working on porting Atari arcade games to HTML5 and stuck on how to implement retro-style shapes.

Since the <canvas> element does not support disabling pixel interpolation across browsers all too well yet, low-res games appear blurry and muddy.

Instead, I want to know how to draw 8-bit shapes in JavaScript.

For instance:

Circles I want to be able to draw:

http://i.imgur.com/xJP4dX8.png

Also the best way to draw lines like this:

https://i.stack.imgur.com/THCcV.png

How to draw 8-bit circles and lines in canvas.

ikradex
  • 131
  • 2
  • 5
  • 1
    Please share some code with what you tried so far. You will need to go low-level with all draw operations to achieve this (ie. implement pixel based line and circle drawing) or use pre-drawn sprites. What will be the "native" resolution? –  Aug 14 '13 at 18:05
  • For now I've simply used the canvas 'arc' and 'lineTo' methods for drawing circles and lines respectively. However, with the "native" res being 500 x 450, circles look like this http://i.imgur.com/7pyXaHy.png and lines look like this http://i.imgur.com/JtcOIJy.png – ikradex Aug 14 '13 at 18:51
  • did you try drawing to an invisible lower-size canvas and then `drawImage` that canvas upscaled to the larger canvas where you set `context.imageSmoothingEnabled = false`? – Philipp Aug 16 '13 at 11:58
  • 1
    The image smoothing happens regardless in Chrome, which I want the game to work in above all others. – ikradex Aug 18 '13 at 01:05

0 Answers0