Maintaining Object Position in 2D Transforms

Question

Maintaining Object Position in 2D Transforms

I am trying to create multiple perspective-transformed rectangles in the lower right corner of a canvas by using ctx.transform:

ctx.transform(1, 0, -1, 1, 10, 10)

.

My goal now is to adjust the size of the drawing based on a variable scale=n, while keeping the position centered. However, when I move the slider, it changes the position of the shapes. How can I prevent this from happening?

let canvas = document.getElementById("canvas")
canvas.width = canvas.height = 200;
$(canvas).appendTo(document.body)
let ctx = canvas.getContext("2d")

let update = function(input) {
  let scale = input.value;
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.transform(1, 0, -1, 1, 10, 10)
  for (let i = 0; i < 4; i++) {
    ctx.fillStyle = (i === 2) ? "#3b2a19" : "#957e67"
    let layer = {
      x: canvas.width + scale * 7 - i * scale,
      y: canvas.height - scale * 5 - i * scale,
      width: scale * 3,
      height: scale * 1.5
    }
    ctx.fillRect(layer.x, layer.y, layer.width, layer.height)
    ctx.strokeRect(layer.x, layer.y, layer.width, layer.height)
  }
  ctx.resetTransform();
}

$("input").trigger("input")

#canvas {
  border: 2px solid red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>

<input oninput="update(this)" type="range" min="1" max="20" />

javascript html css canvas transform

Answer 1

Answer №1

It is suggested to manually draw the shapes instead of using the transform function.

Refer to the following example code:

let canvas = document.getElementById("canvas")
canvas.width = canvas.height = 200;
$(canvas).appendTo(document.body)
let ctx = canvas.getContext("2d")

function shape(x,y,s) {
  var f = s/18
  ctx.moveTo(x-10*f, y-60*f);
  ctx.lineTo(x-110*f, y-60*f);
  ctx.lineTo(x-160*f, y-10*f);
  ctx.lineTo(x-60*f, y-10*f);
  ctx.lineTo(x-10*f, y-60*f);
  ctx.fill();
  ctx.stroke();
}

let update = function(input) {
  let scale = input.value;
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.lineWidth = Math.min(scale/2, 2);
  for (let i = 0; i < 4; i++) {
    ctx.beginPath();
    ctx.fillStyle = (i === 2) ? "#3b2a19" : "#957e67"
    shape(canvas.width, canvas.height -i * scale * 1.5, scale)
  }
}

$("input").trigger("input")

canvas { border: 1px solid red }
input { position: absolute }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input oninput="update(this)" type="range" min="1" max="20">
<canvas id="canvas"></canvas>

Answer 2

It is suggested to manually draw the shapes instead of using the transform function.

Refer to the following example code:

let canvas = document.getElementById("canvas")
canvas.width = canvas.height = 200;
$(canvas).appendTo(document.body)
let ctx = canvas.getContext("2d")

function shape(x,y,s) {
  var f = s/18
  ctx.moveTo(x-10*f, y-60*f);
  ctx.lineTo(x-110*f, y-60*f);
  ctx.lineTo(x-160*f, y-10*f);
  ctx.lineTo(x-60*f, y-10*f);
  ctx.lineTo(x-10*f, y-60*f);
  ctx.fill();
  ctx.stroke();
}

let update = function(input) {
  let scale = input.value;
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.lineWidth = Math.min(scale/2, 2);
  for (let i = 0; i < 4; i++) {
    ctx.beginPath();
    ctx.fillStyle = (i === 2) ? "#3b2a19" : "#957e67"
    shape(canvas.width, canvas.height -i * scale * 1.5, scale)
  }
}

$("input").trigger("input")

canvas { border: 1px solid red }
input { position: absolute }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input oninput="update(this)" type="range" min="1" max="20">
<canvas id="canvas"></canvas>

Answer 3

Answer №2

Reduce the number of calculations required in your sketches.

All shapes have identical widths and heights, along with a consistent offset from the preceding shape in the stack.
The camera position is the only variable element here.

To make changes, focus solely on adjusting the camera by modifying your context's transform matrix.

Follow these steps:

Move the context to the origin point of the first shape
Scale the context based on the current scale value
Skew the context by -1 on the Y axis
Draw your stack using fixed values

The initial three steps can be combined into one call to the absolute setTransform method.

The parameters will be as follows:

setTransform(
  scale,    // scale-x
  0,        // skew-x
  - scale,  // skew-y (using '- scale' since skew comes after scaling)
  scale,    // scale-y
  origin_x, // adjust prior to standard scaling
  origin_y
)

Once this is done, the drawing process remains consistent.

const canvas = document.getElementById("canvas")
canvas.width = canvas.height = 200;
const ctx = canvas.getContext("2d")
const input = document.querySelector('input');
function update() {
  // Constants for our shapes
  const origin_x = 160; // center of all rects
  const origin_y = 160; // bottom of shapes
  const w = 33; // rect width
  const h = 16.5; // rect height
  const offset = 11; // axis offset (* i)
  const scale = input.value;
  
  // Reset transformation matrix
  ctx.setTransform(1,0,0,1,0,0);
  // Clear everything
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  // Move context so origins are top-left
  // Already scaled and skewed
  ctx.setTransform(scale, 0, -scale, scale, origin_x, origin_y);
  
  // Scale no longer important from now on
  for (let i = 0; i < 4; i++) {
    ctx.fillStyle = (i === 2) ? "#3b2a19" : "#957e67"
    let layer = {
      x: -i * offset - w/2,
      y: -i * offset,
      width: w,
      height: h
    }
    ctx.fillRect(layer.x, layer.y, layer.width, layer.height)
    ctx.strokeRect(layer.x, layer.y, layer.width, layer.height)
  }
}
input.oninput = update;
input.oninput();

#canvas {
  border: 2px solid red
}
input {
  display: block;
  width: 75vw;
}

<input type="range" min="0.01" max="20" value="1" step="0.001" id="inp"/>
<canvas id="canvas"></canvas>

Answer 4

Reduce the number of calculations required in your sketches.

All shapes have identical widths and heights, along with a consistent offset from the preceding shape in the stack.
The camera position is the only variable element here.

To make changes, focus solely on adjusting the camera by modifying your context's transform matrix.

Follow these steps:

Move the context to the origin point of the first shape
Scale the context based on the current scale value
Skew the context by -1 on the Y axis
Draw your stack using fixed values

The initial three steps can be combined into one call to the absolute setTransform method.

The parameters will be as follows:

setTransform(
  scale,    // scale-x
  0,        // skew-x
  - scale,  // skew-y (using '- scale' since skew comes after scaling)
  scale,    // scale-y
  origin_x, // adjust prior to standard scaling
  origin_y
)

Once this is done, the drawing process remains consistent.

const canvas = document.getElementById("canvas")
canvas.width = canvas.height = 200;
const ctx = canvas.getContext("2d")
const input = document.querySelector('input');
function update() {
  // Constants for our shapes
  const origin_x = 160; // center of all rects
  const origin_y = 160; // bottom of shapes
  const w = 33; // rect width
  const h = 16.5; // rect height
  const offset = 11; // axis offset (* i)
  const scale = input.value;
  
  // Reset transformation matrix
  ctx.setTransform(1,0,0,1,0,0);
  // Clear everything
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  // Move context so origins are top-left
  // Already scaled and skewed
  ctx.setTransform(scale, 0, -scale, scale, origin_x, origin_y);
  
  // Scale no longer important from now on
  for (let i = 0; i < 4; i++) {
    ctx.fillStyle = (i === 2) ? "#3b2a19" : "#957e67"
    let layer = {
      x: -i * offset - w/2,
      y: -i * offset,
      width: w,
      height: h
    }
    ctx.fillRect(layer.x, layer.y, layer.width, layer.height)
    ctx.strokeRect(layer.x, layer.y, layer.width, layer.height)
  }
}
input.oninput = update;
input.oninput();

#canvas {
  border: 2px solid red
}
input {
  display: block;
  width: 75vw;
}

<input type="range" min="0.01" max="20" value="1" step="0.001" id="inp"/>
<canvas id="canvas"></canvas>

Maintaining Object Position in 2D Transforms

Answer №1

Answer №2

Similar questions

Identification of input change on any input or select field within the current modal using JavaScript

The visibility of overflow-y does not seem to be working properly when overflow-x is

What is the solution for correcting the fixed footer in jQuery Mobile?

Dealing with validations in a personalized aid

Retrieve the text located within the span tag using Selenium

.mouseleave() triggers when exiting a designated boundary area

What is the best way to determine if my code is executing within a NodeJS environment?

Ways to conceal images until AFTER the completion of the jquery flexslider loading process

Is there a way to import a module generated by typescript using its name directly in JavaScript?

Endless cycle of React hooks

Is there a potential race condition in React when switching between lists?

Adjust the alignment of two headers with varying sizes

Having trouble achieving the desired effect with inline block

Move items between two tree views using Javascript and jQuery drag and drop functionality

Understanding the reading of Java Class List in Vue Js

Implement a slideshow feature that automatically changes a CSS attribute when preview images are shown

Having an issue with deleting a table row using jQuery when the button is clicked

Combine the promises from multiple Promise.all calls by chaining them together using the array returned from

Angular JS is failing to update views when passing dynamic IDs

Filtering in AngularJS based on a specific ID