Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating a color palette, <img> or <div> or <canvas>?

Tags:

html

semantics

I'm currently working on an color-picker component using HTML, CSS and Javascript, one major question is how I should implement a color palette like this one:

enter image description here

Ignoring browser compatibility issues introduced by IE8 or earlier, I have 3 methods to implement this:

  1. The <img> way:

    This is simple and is used by many color-picker components for years, we simply include an image exactly the same as the above one using <img src="palette.png" />.

    The problem is <img> would introduce extra network roundtrip, although we can prevent it using dataURI, but an image data is a little too large for me.

  2. The <div> way:

    In this way we should use 2 <div> elements, one of them provides a left-to-right linear gradient and the other provides a top-to-bottom alpha gradient, the style should be:

    <style>
        #map {
            width: 400px; 
            height: 400px;
            background: -webkit-gradient(
                linear, left top, right top, 
                color-stop(0%,#ff0000), 
                color-stop(16.67%,#ffff00), 
                color-stop(33.33%,#00ff00),
                color-stop(50%,#00ffff), 
                color-stop(66.67%,#0000ff),
                color-stop(83.33%,#ff00ff), 
                color-stop(100%,#ff0000)
            );
        }
        #overlay {
            width: 400px;
            height: 400px;
            background: -webkit-gradient(
                linear, left top, left bottom, 
                from(rgba(0, 0, 0, 0)), 
                to(rgba(0, 0, 0, 1))
            );
        }
    </style>
    
    <div id="palette"><div id="overlay"></div></div>
    

    It works perfectly, but the problem is, this method introduces 2 elements for styling only, the 2 <div> elements don't have any semantic meanings and don't act as a generic container or block, this is a violation to semantic HTML.

  3. The <canvas> way:

    <canvas> provides very flexible graphic API to implement such a color palette, I use these code to draw it:

    var context = canvas.getContext('2d');
    
    var palette = context.createLinearGradient(0, 0, 360, 0);
    palette.addColorStop(0 / 6, '#ff0000');
    palette.addColorStop(1 / 6, '#ffff00');
    palette.addColorStop(2 / 6, '#00ff00');
    palette.addColorStop(3 / 6, '#00ffff');
    palette.addColorStop(4 / 6, '#0000ff');
    palette.addColorStop(5 / 6, '#ff00ff');
    palette.addColorStop(6 / 6, '#ff0000');
    context.fillStyle = palette;
    context.fillRect(0, 0, 360, 360);
    
    var overlay = context.createLinearGradient(0, 0, 0, 360);
    overlay.addColorStop(0, 'rgba(0, 0, 0, 0)');
    overlay.addColorStop(1, 'rgba(0, 0, 0, 1)');
    context.fillStyle = overlay;
    context.fillRect(0, 0, 360, 360);
    

    It works as well as the above 2 approaches, but I wonder whether I should use canvas to draw such a static image, shouldn't canvas be used in more dynamic and complex enviroment?

So which way should I go to implement a simple color palette, or is there a better approach?

like image 845
otakustay Avatar asked Mar 21 '12 03:03

otakustay


People also ask

How do I fill a rectangle with canvas color?

The fillRect() method draws a "filled" rectangle. The default color of the fill is black. Tip: Use the fillStyle property to set a color, gradient, or pattern used to fill the drawing.


Video Answer


1 Answers

If you wanted to use an image, but don't want the extra request, you could use a data URI:

<img width="184" height="184" title="" alt="" src="data:image/png;base64,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" />

Demo

like image 89
bookcasey Avatar answered Sep 17 '22 15:09

bookcasey