# Illustration of the sample solution

## Illustration of the sample solution

```Just an illustration of the sample solution (attached pdf).
```
AttachmentSize
10.84 KB
3 posts / 0 new
For more complete information about compiler optimizations, see our Optimization Notice.

I'm using the following code to visualize the problem. Feel free to use it if it helps:

```

//	Generated - begin
var width = 7;
var height = 7;
var black = [ 6, 1, 1, 3, 5, 6, 1, 5,  ];
var white = [ 3, 1, 4, 2, 4, 3, 7, 4, 4, 4, 7, 5, 2, 6, 5, 7,  ];

var pathr = 1;
var pathc = 7;
var path = "DDDDDLDLLLULLUUUURDDDRUUUURRDDLDDRRUUUUR";
//	Generated - end

//	Variables
var cellSize = 30;
var boardColor = "#008000";
var gridColor = "#004000";
var pathColor = "#ff0000";
var canvas = document.getElementById("masyu");
var ctx = canvas.getContext("2d");
var t;

//	Board
canvas.width = (width + 1) * cellSize;
canvas.height = (height + 1) * cellSize;

ctx.fillStyle = boardColor;
ctx.fillRect(cellSize, cellSize, canvas.width - cellSize, canvas.height - cellSize);

ctx.fillStyle = gridColor;
ctx.textAlign = "center";

var halfCellSize = cellSize / 2;

for(var i=0; i<=width; i++) {
t = (i + 1) * cellSize;
if(i > 0)
ctx.fillText("" + i, t - halfCellSize, cellSize * 0.8);
line(ctx, t, cellSize, t, canvas.height-1);
}

for(var i=0; i<=height; i++) {
t = (i + 1) * cellSize;
if(i > 0)
ctx.fillText("" + i, halfCellSize, t - halfCellSize);
line(ctx, cellSize, t, canvas.width-1, t);
}

ctx.strokeStyle = gridColor;
ctx.stroke();

//	Circles
ctx.fillStyle = "#000000";
drawCircles(ctx, black);

ctx.fillStyle = "#ffffff";
drawCircles(ctx, white);

//	Path
if(path) {
var pathx = pathc * cellSize + halfCellSize;
var pathy = pathr * cellSize + halfCellSize;

ctx.beginPath();
ctx.arc(pathx, pathy, radius * 0.25, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fillStyle = pathColor;
ctx.fill();

ctx.moveTo(pathx, pathy);
for(var i=0; i

```

The output is:

// 0)
ctx.fillText("" + i, t - halfCellSize, cellSize * 0.8);
line(ctx, t, cellSize, t, canvas.height-1);
}

for(var i=0; i<=height; i++) {
t = (i + 1) * cellSize;
if(i > 0)
ctx.fillText("" + i, halfCellSize, t - halfCellSize);
line(ctx, cellSize, t, canvas.width-1, t);
}

ctx.strokeStyle = gridColor;
ctx.stroke();

// Circles
ctx.fillStyle = "#000000";
drawCircles(ctx, black);

ctx.fillStyle = "#ffffff";
drawCircles(ctx, white);

// Path
if(path) {
var pathx = pathc * cellSize + halfCellSize;
var pathy = pathr * cellSize + halfCellSize;

ctx.beginPath();
ctx.arc(pathx, pathy, radius * 0.25, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fillStyle = pathColor;
ctx.fill();

ctx.moveTo(pathx, pathy);
for(var i=0; i

Note: This won't work in IE < 9

That's awesome akki! Thanks for saving me from having to write the same thing :)