<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
#myCanvas{
#myCanvas{
/* border:1px; */
width:500px;
height:400px;
margin:50px;
}
var color = [
var color = [
'rgb(106, 210, 231)',
'rgb(250, 104, 0)',
'rgb(243, 132, 48)',
'rgb(198, 244, 98)',
'rgb(255, 107, 107)',
'rgb(250, 204, 0)',
'rgb(232, 125, 2)',
'rgb(202, 232, 105)',
'rgb(0, 169, 199)',
'rgb(63, 191, 202)',
'rgb(174, 225, 55)',
'rgb(208, 231, 80)',
'rgb(78, 189, 233)',
'rgb(37, 174, 228)',
'rgb(249, 214, 36)',
'rgb(240, 122, 25)',
'rgb(239, 169, 46)',
'rgb(136, 197, 38)',
'rgb(190, 242, 2)',
'rgb(250, 42, 0)',
'rgb(0, 178, 255)',
'rgb(127, 255, 36)',
'rgb(194, 255, 102)',
'rgb(200, 255, 0)',
'rgb(19, 205, 75)',
'rgb(126, 112, 215)',
'rgb(187, 233, 7)',
'rgb(192, 250, 56)',
'rgb(170, 255, 0)',
'rgb(255, 170, 0)',
'rgb(255, 0, 170)',
'rgb(170, 0, 255)',
'rgb(0, 170, 255)',
'rgb(255, 255, 0)'
];
var x, y, cx, cy, x0, y0, x1, y1, i, c, randc;
var canvas = document.getElementById("myCanvas");
var width = canvas.width=200;
var height = canvas.height=150;
var ctx = canvas.getContext("2d");
randc =3;
ctx.strokeStyle = color[c];
for (x=0 ; x < width ; x++){
cx = x/60-2.2;
for (y=0 ; y < height ; y++){
c = 1;
cy = 1.3-y/60;
x0 = 0;
y0 = 0;
for ( i=1 ; i < 20 ; i++){
x1 = x0 * x0 - y0 * y0 + cx;
y1 = 2 * x0 * y0 + cy;
if ((x1 * x1 + y1 * y1) > 2000){
ctx.fillRect(x , y , 1 , 1);
}
else{
x0 = x1;
y0 = y1;
c += randc;
ctx.fillStyle = color[c];
}
}
}
}