Jump to content
Search Community

canvas responsive

Mattes test
Moderator Tag

Recommended Posts

Hi,

 

This is more a Canvas related question than a GSAP one. After a simple inspection of the drawImage method:

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

 

I think this might be a good approach:

function update() {
    
  const frame = frames[logo4net.frame];
  
  const f = frame.frame;
  const s = frame.spriteSourceSize;
    
  const x = logo4net.x + s.x;
  const y = logo4net.y + s.y;
  
  
  context.save();
  context.clearRect(0, 0, vw, vh);
  context.globalAlpha = logo4net.alpha;
  context.translate(cx, cy);
  context.scale(logo4net.scale, logo4net.scale);
  context.rotate(logo4net.rotation);  
  context.drawImage(sprite, f.x, f.y, f.w, f.h, x/2, y/2, f.w/2, f.h/2);
  context.restore();
}

You'll have to play with this a bit and see if you reach a point where this works as you expect. Maybe create a boolean for large/small screen and based on that either use the full value or half value using a window resize event handler.

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...