Draw a circle filled with random color sqares on canvas

user1854236 Published at Dev

user1854236

I've got pretty strange example to work on... I need to fill a circle with 1x1 pixels, all with different colors in a browser.

What I tried, is something like this

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

function createRandomSqaure(destination) {
    var size = destination.height() * destination.width();

    for (var i = 0; i < size; i += 1) {
        destination.append('<div class="pixel" style="background: ' + getRandomColor() + '"></div>');
    }
}

createRandomSqaure($('.pic'));

The case is, it super slow (as you can imagine, loop goes 40k times for 200x200 image), I thought maybe a better way will be drawing It on canvas? And I need to draw a circle filled with this pixels in the end...

I don't know how to do something like this in a more optimal way, I can use a nodejs server also, but I think generating something like this server side on heroku is a way too much.

I'm just curious what do you guys think, and what is the best way to do something like this?

user1693593

You can use a simple approach like this:

Draw all the pixels with random colors in a 200x200 grid on a canvas
Change composite mode
Draw circle on top

Live demo

Results in:

enter image description here

Example:

var canvas = document.getElementById('canvas'), // get canvas element
    ctx = canvas.getContext('2d'),              // get context
    x, y = 0,                                   // initialize
    dia = canvas.width,
    radius = dia * 0.5;

ctx.translate(0.5, 0.5);                        // to make pixels sharper

for(; y < dia; y++) {                           // walk x/y grid
    for(x = 0; x < dia; x++) {
        ctx.fillStyle = getRndColor();          // set random color
        ctx.fillRect(x, y, 1, 1);               // draw a pixel
    }
}

// create circle

// removes pixels outside next shape
ctx.globalCompositeOperation = 'destination-in'; 
ctx.arc(radius, radius, radius, 0, 2*Math.PI);
ctx.fill();

// reset
ctx.globalCompositeOperation = 'source-over'; 

function getRndColor() {
    var r = 255*Math.random()|0,
        g = 255*Math.random()|0,
        b = 255*Math.random()|0;
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-7

Comments

0 comments

From Dev

Related Related

Article

Draw a circle filled with random color sqares on canvas

Draw a circle filled with random color sqares on canvas

Draw circle with random color on canvas

Draw a transparent circle onto a filled android canvas

Draw Point or filled in circle

Draw clockwise filled in circle

Draw a filled circle with number inside

Drawing a filled circle in a canvas on mouseclick

JavaScript - Draw circle on canvas

Circle animation random color

How to draw circle by canvas in Android?

Draw a hollow circle on an Android Canvas

HTML 5 Canvas and Draw Circle

Cannot draw a proper circle with Canvas

How to draw filled triangle on android Canvas

HTML5 Canvas - Draw segments and circles - Different color for one circle

Canvas for drawing is a circle; random dots within canvas

Android canvas circle color blur

Draw random coloured circles on canvas

Android canvas: draw transparent circle on image

Draw a circle in canvas manually pixel by pixel

Draw rectangles on line of circle on a canvas in android

How to draw a circle with radial gradient in a canvas?

how to draw a circle on Canvas using java for android

Android: Draw circle in custom canvas on button click

How can I draw a circle on a canvas?

Want my canvas draw a circle but result in a eclipse

Javascript and Canvas Draw Circle with Hole in Middle

Draw a circle in a canvas with several gradient colors

How to draw curves in circle in canvas using for loop?

How to correctly draw a circle with gaps in a canvas element?