How to scale text and image to responsive canvas?

Hi! I'm trying to do a big project, but I'm stuck in a part of it. The canvas I'm working on is responsive, but the text and image aren't. Here's a simple code that make what i'm needing.

function setup(){ createCanvas(windowWidth,windowHeight); logo = loadImage("logo.png"); }

function draw(){ background(0); imageMode(CENTER); image(logo, windowWidth / 2, windowHeight / 3, 100, 100); imageMode(CORNER); textSize(30); textAlign(CENTER, CENTER); rectMode(CENTER); text('This is a string of text! This is a string of text!',windowWidth / 2, windowHeight / 2 , windowWidth, windowHeight); }

This is what it looks on a laptop screen: pic1

And this is what look on a responsive screen: pic2

I want to make the text and the image as big and legible than it is on responsive mode. I know that I have to change the lines

textSize(30); and image(logo, windowWidth / 2, windowHeight / 3, 100, 100);

but i don't know how. Any tips?


Sign In or Register to comment.