dotMatrix Syntax

output can be a number or a string.

color color of the dots. Default is red. [optional]

bg_color background color of the canvas. Default is black. [optional]

width canvas width in pixel. Default is 70 pixel. [optional]

rows numbers of rows in the matrix. Default is 7. [optional]

cols numbers of columns in the matrix. Default is 7. [optional]

canvasID canvas ID, usefull if you want to use more that one matrix display. [optional]
Default is matrixCan0, matrixCan1, 2, 3, etc.

dot_shape shape of the dots. [optional]
0 = Squared dots (default).
1 = Round dots.
2 = Round dots without space between the dots.
3 = Squared dots without space between the squares.

Optional array

matrixData = [array]

Examples

Code:

dotMatrix(12345);

Code:

dotMatrix("Hello World");

Code:

dotMatrix("Green text", "#00FF00"); or: dotMatrix("Green text", "green");

Code:

dotMatrix("Small orange display", "#FFA500", 0, 30); or: dotMatrix("Small orange display", "orange", 0, 30);

Code:

dotMatrix("dots", null, null, 100, null, null, null, 1); or: dotMatrix("dots", 0, 0, 100, 0, 0, 0, 1);

Code:

dotMatrixClock(); setInterval(dotMatrixClock, 1000); function dotMatrixClock() { let clock_time = new Date(); let clock_hours = clock_time.getHours(); let clock_minutes = clock_time.getMinutes(); let clock_seconds = clock_time.getSeconds(); if (clock_hours < 10) { clock_hours = "0" + clock_hours; } if (clock_minutes < 10){ clock_minutes = "0" + clock_minutes; } if (clock_seconds < 10){ clock_seconds = "0" + clock_seconds; } dotMatrix(clock_hours + ":" + clock_minutes + ":" + clock_seconds); }

Code:

dotMatrix("Rainbow text", "rainbow");

Code:

<style>#matrixCan0 { padding: 7px; border-radius: 50px; }</style> <script> matrixData = [ "x", "0011111100011000011011000000111001001001100000000110100001011001111001110000001101100001100011111100" ]; dotMatrix("x", "#000000", "#FFAA00", 0, 10, 10); </script>

Tip

Sometimes it can be a good idea, to put the canvas outside the script, like: <canvas id="matrixCan0" width="70" height="70" style="background-color: #000000;"></canvas>

Note