A different version of the Japanese flag (the rising sun) using canvas

Question

There are lots of hints on how to create the flag of Japan using only CSS/HTML. It is possible, with canvas to recreate the Rising Sun. It isn't an exact replica, but you get the idea of how to use canvas to create the image you want.

var c = document.getElementById("Canvas1");
var ct1 = c.getContext("2d");
var d = document.getElementById("Canvas2");
var ct2 = d.getContext("2d");
ct1.moveTo(0,50);
ct1.lineTo(100,100)
ct1.lineTo(0,80);
ct1.lineTo(0,50);
ct1.closePath();
ct1.fillStyle = "#ff0000";
ct1.fill(); 
ct1.moveTo(50,0);
ct1.lineTo(100,100)
ct1.lineTo(80,0);
ct1.lineTo(50,0);
ct1.closePath();
ct1.fillStyle = "#ff0000";
ct1.fill(); 
ct1.moveTo(20,0);
ct1.lineTo(100,100)
ct1.lineTo(0,20);
ct1.lineTo(0,0);
ct1.lineTo(20,0);
ct1.closePath();
ct1.fillStyle = "#ff0000";
ct1.fill(); 
ct1.moveTo(110,0);
ct1.lineTo(100,100)
ct1.lineTo(140,0);
ct1.lineTo(110,0);
ct1.closePath();
ct1.fillStyle = "#ff0000";
ct1.fill(); 
ct1.moveTo(170,0);
ct1.lineTo(100,100)
ct1.lineTo(200,20);
ct1.lineTo(200,0);
ct1.lineTo(170,0);
ct1.closePath();
ct1.fillStyle = "#ff0000";
ct1.fill(); 
ct1.moveTo(200,50);
ct1.lineTo(100,100)
ct1.lineTo(200,80);
ct1.lineTo(200,50);
ct1.closePath();
ct1.fillStyle = "#ff0000";
ct1.fill(); 
ct1.moveTo(75,75);

ct2.beginPath();
ct2.arc(100, 100, 30, 0.5 * Math.PI, 2*Math.PI);
ct2.closePath();
ct2.stroke();
ct2.fillStyle = "#ff0000";
ct2.fill(); 






ct1.stroke();

<canvas id="Canvas1" width="200" height="100" style="position: absolute; left: 1; border:1px solid #333; background-color: #Fff;box-shadow: 5px 5px 10px #666;"></canvas>

<canvas id="Canvas2" width="200" height="100" style="position: absolute; left: 1; border:1px solid #333; backgroundL transparent;"></canvas>

Answer 1

Creating dynamic shapes.

The best thing about programming is that you can give the code smarts. You have hard coded all the lines and arcs. If you need to make changes it would require some effort.

Example

The snippet does about the same thing but lets you dynamically set the ray count, circle radius, colors, and inner and outer ray width. It is also scaled to the canvas diagonal so will fit any canvas size and aspect ratio (as long as there are some pixels).

Use the sliders to change the various settings.

var W = canvas.width, H = canvas.height;
const ctx = canvas.getContext("2d");
render();
// sunRadius as fraction of canvas diagonal
function drawStyleSun(sunRadius, rayCount, rayRatio, outerRayRatio, bgCol, sunCol) {
    const maxRadius = Math.hypot(W, H) * 0.5;  // half canvas diagonal 
    sunRadius *= maxRadius;
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.fillStyle = bgCol;
    ctx.fillRect(0, 0, W, H)
    ctx.setTransform(1, 0, 0, 1, W * 0.5, H  * 0.5);
    ctx.fillStyle = sunCol;
    const rayStep = Math.PI * 2 / rayCount;
    const rayWidth = rayStep * rayRatio * 0.5;
    const rayOuterWidth = rayStep * outerRayRatio * 0.5;
    const bgWidth = rayStep * (1 - rayRatio);
    ctx.beginPath();
    var top = -Math.PI * 0.5;  // start at top ray
    while (rayCount-- > 0) {
        ctx.arc(0, 0, maxRadius, top - rayOuterWidth, top + rayOuterWidth);
        ctx.arc(0, 0, sunRadius, top + rayWidth, top + rayWidth + bgWidth);
        top += rayStep;
    }
    ctx.fill();
    
}
function render() {
    drawStyleSun(radiusEl.value, rayCountEl.value | 0, rayRatioEl.value, outerRayRatioEl.value, "green", "gold");
}
rayCountEl.addEventListener("input", render);
radiusEl.addEventListener("input", render);
rayRatioEl.addEventListener("input", render);
outerRayRatioEl.addEventListener("input", render);

* {font-family: arial; font-size: small;}
canvas { position : absolute; top : 00px; left : 200px; box-shadow: 5px 5px 10px #666;"}

<lable for="rayCountEl">Rays...</label>
<input id ="rayCountEl" type="range" min=2 max=26 step=1 value=16></br>
<lable for="radiusEl">Radius</label>
<input id ="radiusEl" type="range" min=0.01 max=0.5 step=0.01 value=0.1></br>
<lable for="rayRatioEl">Ratio..</label>
<input id ="rayRatioEl" type="range" min=0.01 max=0.99 step=0.01 value=0.5></br>
<lable for="outerRayRatioEl">Ratio..</label>
<input id ="outerRayRatioEl" type="range" min=0.01 max=0.99 step=0.01 value=0.5></br>
<canvas id="canvas" width="270" height="180"></canvas>

_{Note: Using AU colour scheme}