HTML Canvas remove squares from background

user_9142729 0
Viewed 61

I am trying to paint bits on canvas, the following way

function drawOnCanvas(hex){
    const ctx = canvas.getContext("2d");

    canvas.height = (30/256) * canvas.width;
    ctx.fillStyle = 'black';

    const portion_width = canvas.width / 256;
    const portion_height = canvas.height / 30;


    const bytes = hexToBytes(hex);
    let x = 0, y = 0;
    for(let byte of bytes) {
        for(let i = 0 ; i < 8 ; i++) {
             if(byte & (1 << i)) {
                 ctx.fillRect(x, y, portion_width, portion_height);
             }
             x += portion_width;
             if(x >= canvas.width) {
                 x = 0;
                 y += portion_height;
             }
         }   
     }
}

Here is the html secetion

<canvas bind:this={canvas}></canvas>
<style>
    canvas {
        border: 2px solid red;
        width:100%;
    }
</style>

Here is the result

enter image description here

This is the same bytes decoded into image in python.

enter image description here

I am trying to remove but with no succsess the squares in the background, any help will be appericiated. The Applicaiton is written in svelte, But I don't think its have anything to do with my problem.

svelte canvas css html javascript
1 Answers

Rather than drawing individual rectangles per pixel, it would be far more efficient to build the new image using the Canvas get/putImageData calls, then it can be drawn with a single blit.

The squares could be a Moiré pattern caused by down-sampling a much larger image, but without more information on the source image data it's tricky to say where the artefacts are coming from.

Here's an example of using the get/put image data calls:

const hex =
    "ffffffffffffffffffffffffffffffffffffffffff0700f0000000fc7fffffffffffffffffffffffffff3ff8ff7f00fc1f0100fe3f00002000000000000080dd" +
    "ffffffffff003e80f8ff1fc0ff7f00fc070000fc7f0000f00000000000000000ffffffffff003e00e0ff1ff0ff3f00fc070000fcff0100f80100000000000000" +
    "ffffffffff007e00f8ff1ff0ff3f80ff4f0000feff0300f8010000800000001cffffffffff007f00f8ff1ff0ff3ff0ffef0000feff0700f8010000f81f0080ff" +
    "ffffffffff007e00f8ff1ff0ff3f00ffef0100ffff0f00f8010000fe7f00c0ffffffffffff007e00e0ff3fc0ff7f00fcff3700feff0f00f8010000ff7f00e0ff" +
    "ffffffffff011e04c0ff3f80ff7f00fc7f7700feff0f00f8010000ffff00e0ffffffffffff010c0280ff3f80ff7f00fc1f0000feff0f00fc010080ffff00f081" +
    "ffffffffff01800380ff3fc0ff7f00fc0f0000feff0f00fc0100801ff800f081ffffffffff01e01fc0ff3fc0ff7f00fc0f0000fee50f00fc0000800ff800f080" +
    "ffffffffff03801fc0ff3ff0ffff00fe070000fee30f00fc0000800ff800f080ffffffffff03c03fc0ff3ff0ff7f00ff070000ffe30f00fc0000800ffc00f8c0" +
    "ffffffffff01f83fc0ff7fe0ffff00ffff0100ffe30f00fc0000c00ffc00f8c0ffffffffff01f83fc0ff7fe0ffff01fcff0300fff70f00fc0000c00ffc0078c0" +
    "ffff1f1f3e00f87fe0ff7ff0ffffc1ffff0700ffff0f00fc3800c0077e007cc0ffff0f1e3c00fc7fe0ff7ff0ffffe0ffff0fe0ffff0f00fc7f00c0077e007cc0" +
    "ffff0f1e3c00fc3fe0ff7ff0fffff0ffff0ff0ffff0f00fe7f00e0077e007ce0ffff0f1c3c00fe7fe0ffffe0fffff8ffff7ff0ffff0f00fe7f00e0077e003ce0" +
    "ffff0f1c7800fe1d80ffffe0fffff1ffff7ff8ffff0f00fe3f00e00f3f007ee0ffff1f3c7800fc1700ffffc0fffff1ffff7ff8ffff0f00fe1f00e0ff3f00feff" +
    "ffff1f3c7800f81f00feffc1fffffbffffffffffff073efe0700e0ff1f00fc7fffff1f387000f80f00ffffe3fffffffffffffeffff177efc0100c6ff0f00f83f" +
    "ffff3f307000e01f00ffffe1ffffffff7fffffffff017f00000086ff0760c003ffff3f306000c00f80ffffebfffffffffffffdff7f00ff00000002fc00000000" +
    "ffff7f000000c00f00ffffffffffffffffffffffff20fe000000000000000000ffff7f000000c00380fffffffffffffffffffffffffffeff1f00000000000000" +
    "ffffff000000803fe0ffffffffffffffffffffffffffffffff07feff00001d00ffffff01831f00fffcffffffffffffffffffffffffffffffffffffffffffff07" ;

/** @type {HTMLCanvasElement} */
let cvs = document.getElementById("cvs");
let ctx = cvs.getContext("2d");

/** Pixel bit mask LUT */
const masks = [ 0x1, 0x2, 0x4, 0x8, 0x10, 0x20, 0x40, 0x80 ];

/** Image data buffer */
let imgData = ctx.getImageData(0, 0, 256, 30);
let pos = 0;

/** Decode bitmap to RGBA */
for (let i = 0; i < hex.length; i += 2) {
    let byte = parseInt(hex.substring(i, i + 2), 16);
    
    for (let b = 0; b < masks.length; ++b) {
        let pix = ((byte & masks[b]) >> b) * 0xFF;
        imgData.data[pos++] = pix; // R
        imgData.data[pos++] = pix; // G
        imgData.data[pos++] = pix; // B
        imgData.data[pos++] = 255; // A
    }
}

/** Push image data back into canvas */
ctx.putImageData(imgData, 0, 0);
<canvas id="cvs" width="256" height="30"></canvas>

user_86951560
Related