Tinkle Pooplebottham Tinkle Pooplebottham - 19 days ago 5
Javascript Question

Canvas lines not staying when drawing from another function

I cannot understand why my lines are not drawing. I'm trying to combine 2 'drawings'.


  • A grid (draws perfectly well).

  • A couple of other lines (also draw perfectly well).



But when I combine the 2, I lose my lines or they don't 'seem' to get drawn.

*Note that I have 2 functions, each get the context. Again, I can draw one, but not the other (they don't combine on the canvas). Also, reading another StackOverflow question, which was answered by add a beginPath(), no difference. And this one is useless.

What am I missing/doing wrong?



var canvas = document.getElementById("canvasId");
canvas.width = 300;
canvas.height = 300;
var ctx = canvas.getContext("2d");
printLogContext(ctx);
console.log(`__________`);

ctx.beginPath();
//drawGrid(ctx, 300, 300);
drawAxes(ctx);
drawGrid(ctx, 300, 300);

function drawAxes(context) {
printLogContext(context);
context.beginPath;
context.strokeStyle = "000000";
context.beginPath();

context.moveTo(0, 150);
context.lineTo(300, 150);

context.moveTo(150, 0);
context.lineTo(150, 300);

context.stroke();
context.closePath();

}

function drawGrid(ctx, width, height) {
var step = 10;
ctx.strokeStyle = "#E5F7F6";
//resetTransform(ctx);
for (var row = 0; row < width; row = row + step) {
ctx.moveTo(0, row);
ctx.lineTo(width, row);
ctx.stroke();
}

for (var col = 0; col < height; col = col + step) {
ctx.moveTo(col, 0);
ctx.lineTo(col, height);
ctx.stroke();
}
}

function printLogContext(ctx) {
(ctx) ? console.log(`Have ctx`): console.log(`Don't habe ctx`);
}

<canvas id="canvasId" style="border: solid"></canvas>




Answer

It is drawing just fine from both functions.

The problem is that the black axis are overwritten by the light blue grid.

If you change the order of the functions you will see the axis as well.

(you also have to use # when defining a color, even black)

var canvas = document.getElementById("canvasId");
canvas.width = 300;
canvas.height = 300;
var ctx = canvas.getContext("2d");
printLogContext(ctx);
console.log(`__________`);

drawGrid(ctx, 300, 300);
drawAxes(ctx);

function drawAxes(context) {
  printLogContext(context);
  context.strokeStyle = "#000000";
  context.beginPath();

  context.moveTo(0, 150);
  context.lineTo(300, 150);

  context.moveTo(150, 0);
  context.lineTo(150, 300);

  context.stroke();
  context.closePath();

}

function drawGrid(ctx, width, height) {
  var step = 10;
  ctx.strokeStyle = "#E5F7F6";
  //resetTransform(ctx);
  for (var row = 0; row < width; row = row + step) {
    ctx.moveTo(0, row);
    ctx.lineTo(width, row);
    ctx.stroke();
  }

  for (var col = 0; col < height; col = col + step) {
    ctx.moveTo(col, 0);
    ctx.lineTo(col, height);
    ctx.stroke();
  }
}

function printLogContext(ctx) {
  (ctx) ? console.log(`Have ctx`): console.log(`Don't habe ctx`);
}
<canvas id="canvasId" style="border: solid"></canvas>

Comments