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

Errors are not being shown on mandatory fields in the form

When attempting to add objects to an indexedDB object store, an InvalidStateError is encountered

Is it possible to provide unrestricted support for an infinite number of parameters in the typing of the extend function from Lodash

Array contains a copy of an object

Switch up the Javascript popup code without any specific pattern

What steps should I take to create a plugin for a library if defining it as a peerDependency does not provide a specific implementation for me to work with?

Shine a light on the input with a captivating outer

Searching for values within an array using the ".includes" method

Retrieve the image source when clicking on multiple posts that share the same div class and button class

The arrows on the Slick Slider appear cropped on ios devices like the iphone 8, however, they display perfectly when tested on Chrome and Firefox

Exploring the world of CSS font families in Sublime Text 3 and linking them to the web

Guide: How to transfer the output from MongoDB in Node.js to AngularJS?

The dropdown menu vanishes from sight as soon as the cursor moves away from a link

Disregard the popstate triggered by Safari's Initial Page Load

Photos inside a flexbox do not resize correctly

Execute the assignment of exports.someFunction from within a callback function

Tsyringe - Utilizing Dependency Injection with Multiple Constructors

Understanding JavaScript's JSON Path Variables

Material-UI: Avoid onClick event firing when clicking on an element that is overlapped by another in a sticky Table

qunit timer reset