UTF-8 Symbols on Canvas

by brian428

HTML

<div style="border: 2px solid black; width:500px;">
<canvas id="canvas" width="500px" height="500px"></canvas>
<canvas id="tempCanvas" width="10" height="10" style="display:none;"></canvas>
</div>

JavaScript

var toUTF16 = function(codePoint) {
    var TEN_BITS = parseInt('1111111111', 2);
    function u(codeUnit) {
        return '\\u'+codeUnit.toString(16).toUpperCase();
    }

    if (codePoint <= 0xFFFF) {
        return u(codePoint);
    }
    codePoint -= 0x10000;

    // Shift right to get to most significant 10 bits
    var leadSurrogate = 0xD800 + (codePoint >> 10);

    // Mask to get least significant 10 bits
    var tailSurrogate = 0xDC00 + (codePoint & TEN_BITS);

    return u(leadSurrogate) + u(tailSurrogate);
}

var colorList = [
	"#006385", "#F06E75", "#90ed7d", "#f7a35c", "#8085e9",
  "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1",
  "#5DA5DA", "#F06E75", "#F15854", "#B2912F", "#B276B2",
  "#DECF3F", "#FAA43A", "#4D4D4D", "#F17CB0", "#60BD68"
];

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// http://www.w3schools.com/charsets/ref_utf_geometric.asp
var filledSquare = "\u25A0";
var filledRightTriangle = "\u25B6";
var openRightTriangle = "\u25B7";
var squareSlash = "\u25A7"
var filledDimond = "\u25C6";
var openDimond = "\u25C7";


context.font = "16px serif";
context.fillStyle = colorList[0];
context.fillText( filledSquare, 10, 50);

context.fillStyle = colorList[1];
context.fillText( filledRightTriangle, 100, 100);

context.fillStyle = colorList[3];
context.fillText( openRightTriangle, 100, 200);

context.fillStyle = colorList[4];
context.fillText( squareSlash, 400, 50);

context.fillStyle = colorList[5];
context.fillText( filledDimond, 300, 150);

context.fillStyle = colorList[6];
context.fillText( openDimond, 200, 350);