javascript - Count Amount of Colored Squares in Canvas -

javascript - Count Amount of Colored Squares in Canvas -

here fiddle: http://jsfiddle.net/sw31uokt/

here of relevant code incrementvalue function set count overall clicks within canvas element.

what able display count of each color, "you have placed 14 reddish pixels, 3 bluish pixels, 4 black pixels'.

function incrementvalue() { var value = parseint(document.getelementbyid('number').value, 10); value = isnan(value) ? 0 : value; value++; document.getelementbyid('number').value = value; } $(c_canvas).click(function(evt) { var pos = getnearestsquare(getmousepos(c_canvas, evt)); if (pos != null) { context.fillstyle=(currentcolor); context.fillrect(pos.x,pos.y,19,19); incrementvalue(); } });

basically, marke said above ...

in outer scope, add together 2 new vars :

var palette = ["333333", "0000ff", "a0522d", "46ad42", "808080", "ffc0cb", "d73952", "ffe2a8", "ffff7d", "ffffff"];//as defined in .spectrum() call. var gridmodel = [];//eventually sparse array of sparse arrays, representing colored grid squares. uncolored grid squares remain undefined.

and 2 new functions, in same scope :

function updategridmodel(pos, color) { var x = (pos.x - 0.5) / 20; var y = (pos.y - 0.5) / 20; color = color.substr(1).tolowercase(); if (!gridmodel[x]) { gridmodel[x] = []; } gridmodel[x][y] = palette.indexof(color); } function palettetally() { //initialise array, same length palettes, zeros var arr = palette.map(function () { homecoming 0; }); (var x = 0; x < gridmodel.length; x++) { if (gridmodel[x]) { (var y = 0; y < gridmodel[x].length; y++) { if (gridmodel[x][y] !== undefined) { arr[gridmodel[x][y]] += 1; } } } } homecoming arr; }

modify canvas's click handler maintain gridmodel date :

$(c_canvas).click(function (evt) { var pos = getnearestsquare(getmousepos(c_canvas, evt)); if (pos != null) { context.fillstyle = currentcolor; context.fillrect(pos.x, pos.y, 19, 19); incrementvalue(); updategridmodel(pos, currentcolor); //keep gridmodel date. } });

modify printcolor() follows :

function printcolor(color) { currentcolor = color.tohexstring(); $(".label").text(currentcolor); }

modify .spectrum() options , add together initialising phone call printcolor() follows :

$("#showpaletteonly").spectrum({ color: palette[0], showpaletteonly: true, showpalette: true, hideafterpaletteselect: true, change: printcolor, palette: [palette] //<<<< palette defined outer var }); printcolor( $("#showpaletteonly").spectrum('get') );//initialize currentcolor , $(".label").text(...) .

now palettetally() homecoming array congruent palette containing counts of each color.

edit 1

original code above untested debugged , includes improved spectrum options. demo.

javascript jquery css canvas