question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Scale whole canvas?

See original GitHub issue

Hi,

I’m trying to scale the whole canvas in a way that the internal elements will be scaled as well.

Is it something provided out-of-the-box with react-konva? I found the Transform class in Konva but I don’t find a way to make it work with React.

I thought this would work:

<Stage>
  <Transform>

  </Transform>
</Stage>

But React complains because Transform isn’t exposed by react-konva.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

22reactions
lavrtoncommented, Dec 23, 2016

@FezVrasta

<Stage scaleX={0.5}>
  <Layer>
   {/* Your shapes */}
  </Layer>
</Stage>

You can set scaleX and scaleY for any node (Stage, Layer, Group or any Shape)

0reactions
developdeezcommented, Sep 2, 2019

Posted more here. I tried scaleX like the demo.

https://github.com/konvajs/react-konva/issues/400

Read more comments on GitHub >

github_iconTop Results From Across the Web

CanvasRenderingContext2D.scale() - Web APIs | MDN
The CanvasRenderingContext2D.scale() method of the Canvas 2D API adds a scaling transformation to the canvas units horizontally and/or ...
Read more >
Resize HTML canvas with .scale() - javascript - Stack Overflow
You can scale your canvas with content by "bouncing" the content off a temporary canvas while you resize the original canvas.
Read more >
HTML canvas scale() Method - W3Schools
The scale() method scales the current drawing, bigger or smaller. Note: If you scale a drawing, all future drawings will also be scaled....
Read more >
How to scale a <canvas> - disco.zone
Our goal is to scale this canvas to be four times its current size (320x240), with crisp text, a crisp sprite, and a...
Read more >
How to Use JavaScript scale() Canvas API Effectively
The scale() is a method of the 2D drawing context. The scale() method adds a scaling transformation to the canvas units horizontally and/or...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found