Converting multi (move-to) commands to simple (x,y) - html

Question

EDIT::
I have converted the various points to (x,y) just as I wanted. I changed the name from bolt to drop because I already have an established shape named drop. However, it will not draw on the canvas. I replaced the coordinates with a leaf shape I also drew and converted to (x,y) and it worked fine. I can't figure out what's so different about my bolt shape.
context.beginPath();
context.moveTo(drop.x,drop.y);
context.moveTo(drop.x+140,drop.y+28);
context.lineTo(drop.x+24,drop.y+28);
context.moveTo(drop.x+24,drop.y+28);
context.lineTo(drop.x-2,drop.y+25);
context.moveTo(drop.x-2,drop.y+25);
context.lineTo(drop.x+17,drop.y+25);
context.moveTo(drop.x+17,drop.y+25);
context.lineTo(drop.x-18,drop.y+53);
context.moveTo(drop.x-18,drop.y+53);
context.lineTo(drop.x-3,drop.y+54);
context.moveTo(drop.x-3,drop.y+54);
context.lineTo(drop.x-47,drop.y+77);
context.moveTo(drop.x-47,drop.y+77);
context.lineTo(drop.x-31,drop.y+59);
context.moveTo(drop.x-31,drop.y+59);
context.lineTo(drop.x-40,drop.y+59);
context.moveTo(drop.x-40,drop.y+59);
context.lineTo(drop.x-14,drop.y+33);
context.moveTo(drop.x-14,drop.y+33);
context.lineTo(drop.x-30,drop.y+32);
context.moveTo(drop.x-30,drop.y+32);
context.lineTo(drop.x+140,drop.y+28);
context.closePath();
context.fillStyle = 'yellow';
context.fill();
I'm not sure what I want to do is called. This is the code my professor provided for a cloud.
function drawCloud(cloud) {
context.beginPath();
context.moveTo(cloud.x, cloud.y);
context.bezierCurveTo(cloud.x-40, cloud.y+20, cloud.x-40, cloud.y+70, cloud.x+60, cloud.y+70);
context.bezierCurveTo(cloud.x+80, cloud.y+100, cloud.x+170, cloud.y+100, cloud.x+170, cloud.y+70);
context.bezierCurveTo(cloud.x+250, cloud.y+70, cloud.x+250, cloud.y+40, cloud.x+210, cloud.y+20);
context.bezierCurveTo(cloud.x+260, cloud.y-40, cloud.x+200, cloud.y+50, cloud.x+170, cloud.y-30);
context.bezierCurveTo(cloud.x+150, cloud.y-75, cloud.x+80, cloud.y-60, cloud.x+80, cloud.y-30);
context.bezierCurveTo(cloud.x+30, cloud.y-75, cloud.x-20, cloud.y-60, cloud.x, cloud.y);
// complete custom shape
context.closePath();
context.lineWidth = 5;
context.strokeStyle = cloud.color;
context.stroke();
}
I found the shape generator and made this shape
function drawBolt(bolt){
context.beginPath()
context.moveTo(140,28);
context.lineTo(164,28);
context.moveTo(164,28);
context.lineTo(138,53);
context.moveTo(138,53);
context.lineTo(157,53);
context.moveTo(157,53);
context.lineTo(122,81);
context.moveTo(122,81);
context.lineTo(137,82);
context.moveTo(137,82);
context.lineTo(93,105);
context.moveTo(93,105);
context.lineTo(109,87);
context.moveTo(109,87);
context.lineTo(100,87);
context.moveTo(100,87);
context.moveTo(126,61);
context.lineTo(110,60);
context.moveTo(110,60);
context.lineTo(140,28);
context.closePath();
context.fill();
};
She told me that I had to change those points to x,y and I imagine there is math involved? Is there an easy way of doing that?
So how she has (cloud.x-40) I suppose I need bolt.x(?)
Where is a good starting point?
var canvas;
var context;
var shapes = []
var timer;
var timerTwo;
var possibleShapes = ['drop','triangle','square','circle','cloud'];
function Shape(x, y, color) {
this.x = x;
this.y = y;
this.size = Math.random()*20+5;
this.dx = Math.random()*4-2;
this.dy = Math.random()*4-2;
this.color = color;
this.shape = possibleShapes[Math.floor(Math.random()*possibleShapes.length)];
}
function init() {
canvas = document.getElementById('canvas');
context = canvas.getContext("2d");
window.addEventListener('resize', resizeCanvas, false);
window.addEventListener('orientationchange', resizeCanvas, false);
resizeCanvas();
canvas.onclick = function(event) {
handleClick(event.clientX, event.clientY);
};
timer = setInterval(resizeCanvas, 20);
timerTwo = setInterval(newShape, 200);
}
function newShape() {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var colors = ["red", "green", "blue", "orange", "purple", "yellow"];
var color = colors[Math.floor(Math.random()*colors.length)];
shapes.push(new Shape(x, y, color));
}
function drawCircle(circle) {
context.beginPath();
context.arc(circle.x, circle.y, circle.size, 0, degreesToRadians(360), true);
context.fillStyle = circle.color;
context.fill();
}
function drawSquare(square) {
context.beginPath();
context.fillStyle = square.color;
context.fillRect(square.x, square.y, square.size, square.size);
}
function drawTriangle(triangle) {
context.beginPath();
context.fillStyle = triangle.color;
context.moveTo(triangle.x+triangle.size,triangle.y);
context.lineTo(triangle.x,triangle.y);
context.lineTo(triangle.x,triangle.y+triangle.size);
context.closePath();
context.fill();
}
function drawCloud(cloud) {
context.beginPath();
context.moveTo(cloud.x, cloud.y);
context.bezierCurveTo(cloud.x-40, cloud.y+20, cloud.x-40, cloud.y+70, cloud.x+60, cloud.y+70);
context.bezierCurveTo(cloud.x+80, cloud.y+100, cloud.x+170, cloud.y+100, cloud.x+170, cloud.y+70);
context.bezierCurveTo(cloud.x+250, cloud.y+70, cloud.x+250, cloud.y+40, cloud.x+210, cloud.y+20);
context.bezierCurveTo(cloud.x+260, cloud.y-40, cloud.x+200, cloud.y+50, cloud.x+170, cloud.y-30);
context.bezierCurveTo(cloud.x+150, cloud.y-75, cloud.x+80, cloud.y-60, cloud.x+80, cloud.y-30);
context.bezierCurveTo(cloud.x+30, cloud.y-75, cloud.x-20, cloud.y-60, cloud.x, cloud.y);
// complete custom shape
context.closePath();
context.lineWidth = 5;
context.strokeStyle = cloud.color;
context.stroke();
}
function drawDrop(drop) {
context.beginPath();
context.lineJoin = 'miter';
context.moveTo(drop.x, drop.y);
context.arc(drop.x, drop.y+68, 34.5, 5.75, 3.66, false);
context.quadraticCurveTo(drop.x-3.5, drop.y+15, drop.x, drop.y);
context.closePath();
context.lineWidth = 2;
context.fillStyle = drop.color;
context.fill();
}
function drawText() {
context.fillStyle = 'white';
context.font = 'bold 2em sans-serif';
context.textAlign = 'right';
context.fillText('Art?', canvas.width-40, canvas.height-40);
}
function resizeCanvas() {
canvas.width = window.innerWidth-20;
canvas.height = window.innerHeight-20;
fillBackgroundColor();
for (var i=0; i<shapes.length; i++) {
if (shapes[i].shape == 'square') {
drawSquare(shapes[i]);
} else if (shapes[i].shape == 'circle') {
drawCircle(shapes[i]);
} else if (shapes[i].shape == 'triangle') {
drawTriangle(shapes[i]);
} else if (shapes[i].shape == 'drop') {
drawDrop(shapes[i]);
} else if (shapes[i].shape == 'cloud') {
drawCloud(shapes[i]);
}
if (shapes[i].x + shapes[i].dx > canvas.width || shapes[i].x + shapes[i].dx < 0)
shapes[i].dx = -shapes[i].dx;
if (shapes[i].y + shapes[i].dy > canvas.height || shapes[i].y + shapes[i].dy < 0)
shapes[i].dy = -shapes[i].dy;
shapes[i].x += shapes[i].dx;
shapes[i].y += shapes[i].dy;
}
drawText();
}
function fillBackgroundColor() {
//var colors = ["white", "yellow", "blue", "red"];
//var bgColor = colors[Math.floor(Math.random() * colors.length)];
context.fillStyle = 'black';
context.fillRect(0, 0, canvas.width, canvas.height);
}
function degreesToRadians(degrees) {
//converts from degrees to radians and returns
return (degrees * Math.PI)/180;
}
window.onload = init;

Answer 1

You can translate entire canvas instead of modifying your code.
let's suppose that bolt is an object with x and y as properties.
function drawBolt(bolt){
context.save();
context.translate(bolt.x, bolt.y);
context.beginPath()
context.moveTo(140,28);
context.lineTo(164,28);
context.moveTo(164,28);
context.lineTo(138,53);
context.moveTo(138,53);
context.lineTo(157,53);
context.moveTo(157,53);
context.lineTo(122,81);
context.moveTo(122,81);
context.lineTo(137,82);
context.moveTo(137,82);
context.lineTo(93,105);
context.moveTo(93,105);
context.lineTo(109,87);
context.moveTo(109,87);
context.lineTo(100,87);
context.moveTo(100,87);
context.moveTo(126,61);
context.lineTo(110,60);
context.moveTo(110,60);
context.lineTo(140,28);
context.closePath();
context.fill();
context.restore();
};
This is equivalent to drawing the bolt modifying all the points adding x and y to each of them.