• 0

Update multiple <canvas> at different sizes


Question

Can someone help me with a little bit of JavaScript?

 

Have a look at the attached image, I have a <canvas> element called "pic_256", that has a Picture that I've populated. I'd also like to add the same picture to the two other canvases, Each at different sizes, one at 128*128 and the other one at 64*64.  Is there an easy way to update the other canvas elements ("pic_128" and "pic_64")with a smaller version of the original canvas ("pic_256")?


Artboard.thumb.png.47c27e22b3fbc70f1b48d56ec41f6f3a.png

 

 

Link to comment
https://www.neowin.net/forum/topic/1405195-update-multiple-at-different-sizes/
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Maybe by getting the canvas context into a variable    var destcontext = dest.getContext('2d');

and then doing a drawImage    ctx = dest       "image" = source

 

void ctx.drawImage(image, dx, dy);

void ctx.drawImage(image, dx, dy, dWidth, dHeight);

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

 

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

  • Like 1
  • 0

you might try different solutions...

 

ctx.imageSmoothingEnabled = false || true   (true is default)

ctx.imageSmoothingQuality = "low" || "medium" || "high"

 

or css

image-rendering: auto;

image-rendering: crisp-edges;

image-rendering: pixelated;

image-rendering: smooth;

 

Here are also 2 different solutions.  One is with filters, and one is with resizing in multiple steps instead one step.

https://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing

Here is a multistep solution also

https://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality

 

Please tell me which version worked for you 😃

  • 0

FANTTASTIC!!!!

Thank you so much.  The CSS version did not work for me but the canvas context method worked.

 

 

 

  On 21/02/2021 at 19:48, sorlag said:

you might try different solutions...

 

ctx.imageSmoothingEnabled = false || true   (true is default)

ctx.imageSmoothingQuality = "low" || "medium" || "high"

 

or css

image-rendering: auto;

image-rendering: crisp-edges;

image-rendering: pixelated;

image-rendering: smooth;

 

Here are also 2 different solutions.  One is with filters, and one is with resizing in multiple steps instead one step.

https://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing

Here is a multistep solution also

https://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality

 

Please tell me which version worked for you 😃

Expand  

 

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Posts

    • Secret Changelog: New Features: Settings > Start, home, and new tab page > New tab page > Copilot new tab page (Chat, search, and navigate with a modern new tab page inspired by Copilot) Settings > AI innovations (Explore Copilot Mode)
    • Microsoft is adding some very useful features to Word, Teams, Outlook, and more by Usama Jawad Image via Microsoft Microsoft 365 is the Redmond tech firm's premier solution for Office apps and cloud storage, among other things. Microsoft offers both consumer- and enterprise-oriented subscriptions for this solution, enabling customers to take full advantage of cloud-powered capabilities, in contrast to the LTSC versions of Office. Microsoft 365 apps and services regularly receive new updates and the good thing is that Microsoft tracks them in a very transparent way on its public roadmap. The Redmond company has updated its Microsoft 365 Roadmap with a lot of items in the past week or so, and there are several interesting features there that may excite its customers. For starters, Word is getting a very useful utility that will likely help people writing detailed documents using the software. Microsoft is integrating third-party citation providers in the Reference tab, so that users can quickly add citations. This is being made available to GCC, GCC High, and Department of Defense (DoD) customers on desktop and web this month. There are several improvements on the way for Copilot Notebooks too. Users can customize the format, style, and duration of Audio Overviews in the application through natural language prompts. These Audio Overviews can then be saved on OneDrive so that they can be shared with others too. All of these capabilities are landing on the web next month. Speaking of Copilot, Microsoft is moving the navigation pane for Copilot Chat from the right side of the app to the left. Apart from retaining the existing features, this repositioning allows Microsoft to add new capabilities such as an All Conversations tab, while also streamlining the overall navigation experience. This is being implemented for all customers using Outlook and Teams on the web from next month. In the latter software, Microsoft is also introducing regional settings that gives controls over the app's language and datetime formats. This is being made available for all Teams customers on Android, iOS, desktop, and the web from next month. Meanwhile, the desktop version of Teams is exclusively gaining the ability next month to search for meetings and participants in the search bar and take actions directly from there. Available actions include viewing recaps, accessing the dedicated meetings tab, and RSVP-ing. Microsoft added 39 items to the Microsoft 365 Roadmap, so you can understand that the selection of items described above is only scratching the tip of the iceberg. Check out other upcoming capabilities like Universal Print enhancements and more Copilot improvements on the dedicated webpage here.
    • PC to remote Android phone possible?
    • The same idiots that provide their phone numbers and id to discord channels.
  • Recent Achievements

    • Week One Done
      hhgygy earned a badge
      Week One Done
    • One Month Later
      hhgygy earned a badge
      One Month Later
    • One Year In
      NIKI77 earned a badge
      One Year In
    • Week One Done
      artistro08 earned a badge
      Week One Done
    • Dedicated
      Balaji Kumar earned a badge
      Dedicated
  • Popular Contributors

    1. 1
      +primortal
      639
    2. 2
      ATLien_0
      237
    3. 3
      Xenon
      166
    4. 4
      neufuse
      144
    5. 5
      +FloatingFatMan
      122
  • Tell a friend

    Love Neowin? Tell a friend!