Как мне сделать преобразования в HTML Canva?

Question

У меня есть задание для университета воспроизвести фигуру смайликов в контексте html canva 2D. Это то, что я имею до сих пор, и в основном я пытаюсь увеличить его, а в других частях перемещать вещи так, чтобы это имело смысл, но все преобразования не работают, ничего не меняется на изображении. Я знаю, что это довольно просто c, но я не знаю, почему это не работает, поэтому дайте мне знать, если вы можете помочь. спасибо!

function enter(dx, dy, sx, sy, a){
    this.save();
    this.rotate(a);
    this.translate(dx, dy);
    this.scale(sx, sy);
}

function leave(){
    this.restore();
}

function nose(){
    let p = new Path2D();
    p.moveTo(62, 36);
    p.lineTo(66, 36);
    p.quadraticCurveTo(64, 38, 62, 36);
    return p;
}

function mouth(){
    let p = new Path2D();
    p.moveTo(59, 40);
    p.quadraticCurveTo(64, 42, 69, 40);
    p.quadraticCurveTo(64, 47, 59, 40);
    return p;
}

function face(c){
    let p_nose = nose();
    let p_mouth = mouth();

    c.fillStyle = "seagreen";
    c.fill(p_nose);
    c.stroke(p_nose);
    c.fillStyle = "crimson";
    c.fill(p_mouth);
    c.stroke(p_mouth);
}

function main(){
    let canvas_element = document.getElementById("myCanvas");
    let gc = canvas_element.getContext("2d");
    gc.enter = enter;
    gc.leave = leave;
    gc.face = face;

    face(gc)
    gc.enter(0,0,100,100,0);
    leave(gc);
}

Answer 1

Я немного упростил ваш код, чтобы сделать этот пример небольшим.
Вам нужно перевести, повернуть и масштабировать, прежде чем вы начнете рисовать ваши объекты

function enter(c, dx, dy, sx, sy, a) {
  c.save();
  c.rotate(a);
  c.translate(dx, dy);
  c.scale(sx, sy);
}

function leave(c) {
  c.restore();
}

function mouth() {
  let p = new Path2D();
  p.moveTo(59, 40);
  p.quadraticCurveTo(64, 42, 69, 40);
  p.quadraticCurveTo(64, 47, 59, 40);
  return p;
}

function face(c) {
  let p_mouth = mouth();
  c.fillStyle = "crimson";
  c.fill(p_mouth);
  c.stroke(p_mouth);
}

function main() {
  let canvas_element = document.getElementById("myCanvas");
  let gc = canvas_element.getContext("2d");

  enter(gc, -150, -150, 5, 5, 0.2);
  face(gc)
  leave(gc);
}

main()

<canvas id=myCanvas>