Генерация линии на холсте не работает должным образом

Question

Я создал простой скрипт, который будет генерировать строки на холсте.Я хотел добиться, чтобы он начинался с середины холста и заканчивался в произвольной точке холста.

Вот демоверсия:

const c = document.getElementById("canvas");
let ctx = c.getContext("2d");

var _x = window.getComputedStyle(c).width;
var _y = window.getComputedStyle(c).height;

//Get canvas size
var x = (c.width = Number(_x.substring(0, _x.length - 2)));
var y = (c.height = Number(_y.substring(0, _y.length - 2)));

//Turn variables from string to int

function getRandomPoint(x, y) {
  //Generate random point within the canvas
  var px = Math.floor(Math.random() * x);
  var py = Math.floor(Math.random() * y);
  var cord = [px, py];
  return cord;
}

var cord = getRandomPoint(x, y);
createLine(x, y, cord[0], cord[1]);

function createLine(x, y, xk, yk) {
  ctx.beginPath();
  ctx.moveTo(x / 2, y / 2);
  ctx.lineTo(xk, yk);
  ctx.stroke();
}

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

body, html{
    width:100%;
    height:100%;
}

body{
    background-color:#f2f2f2;
}



/* CANVAS */

canvas{
    height:400px;
    width:600px;
    margin: 20px auto;
    background-color:white;
    display: block;
    border: 1px solid #999;
}

<canvas id="canvas"></canvas>

Если вы откроете демонстрацию и увидите пустой холст, попробуйте обновить его несколько раз.Иногда линия появится, и в большинстве случаев это не так.Также это обычно не начинается в середине холста.

Понятия не имею, почему это происходит, я впервые экспериментирую с canvas, так что, возможно, я упускаю что-то очевидное.

Answer 1

Вы забыли указать ширину и высоту холста в атрибутах html:

const c = document.getElementById('canvas');
let ctx = c.getContext('2d');

//Get canvas size
var x = window.getComputedStyle(c).width;
var y = window.getComputedStyle(c).height;
//Turn variables from string to int
x = Number(x.substring(0,x.length-2));
y = Number(y.substring(0,y.length-2));

function getRandomPoint(x,y){
    //Generate random point within the canvas
    px = Math.floor(Math.random()*x);
    py = Math.floor(Math.random()*y);
    cord = [px, py];
    return cord;
}

var cord = getRandomPoint(x,y);
createLine(x,y,cord[0],cord[1]);

function createLine(x,y,xk,yk){
    ctx.moveTo(x/2,y/2);
    ctx.lineTo(xk,yk);
    ctx.stroke();
}

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

body, html{
    width:100%;
    height:100%;
}

body{
    background-color:#f2f2f2;
}



/* CANVAS */

canvas{
    height:400px;
    width:600px;
    margin: 20px auto;
    background-color:white;
    display: block;
    border: 1px solid #999;
}

<canvas id="canvas" width="600" height="400"></canvas>

Answer 2

Вам необходимо объявить ширину и высоту холста в javascript.

const c = document.getElementById("canvas");
let ctx = c.getContext("2d");

var _x = window.getComputedStyle(c).width;
var _y = window.getComputedStyle(c).height;

//Get canvas size
//Turn variables from string to int
var x = (c.width = Number(_x.substring(0, _x.length - 2)));
var y = (c.height = Number(_y.substring(0, _y.length - 2)));



function getRandomPoint(x, y) {
  //Generate random point within the canvas
  var px = Math.floor(Math.random() * x);
  var py = Math.floor(Math.random() * y);
  var cord = [px, py];
  return cord;
}

var cord = getRandomPoint(x, y);
createLine(x, y, cord[0], cord[1]);

function createLine(x, y, xk, yk) {
  ctx.beginPath();
  ctx.moveTo(x / 2, y / 2);
  ctx.lineTo(xk, yk);
  ctx.stroke();
}

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

body, html{
    width:100%;
    height:100%;
}

body{
    background-color:#f2f2f2;
}



/* CANVAS */

canvas{
    height:400px;
    width:600px;
    margin: 20px auto;
    background-color:white;
    display: block;
    border: 1px solid #999;
}

<canvas id="canvas"></canvas>

Answer 3

Вы почти у цели, вы просто забыли добавить ширину и высоту к вашему HTML-узлу Canvas

<canvas id="canvas" height=400 width=600></canvas>