# How to scale text and image to responsive canvas?

**URL:** <https://discourse.processing.org/t/how-to-scale-text-and-image-to-responsive-canvas/909>\
**Category:** Coding Questions\
**Created:** [June 12, 2018, 10:19pm UTC](https://discourse.processing.org/t/how-to-scale-text-and-image-to-responsive-canvas/909 "2018-06-12T22:19:03Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![LoCamillo](https://avatars.discourse-cdn.com/v4/letter/l/9dc877/32.png) [@LoCamillo](https://discourse.processing.org/u/LoCamillo)\
**Post date:** [June 12, 2018, 10:19pm UTC](https://discourse.processing.org/t/how-to-scale-text-and-image-to-responsive-canvas/909/1 "2018-06-12T22:19:03Z")

</div>

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.

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/fdd11b357dc33b46ac0f3f9033d9769c2ef1783c.jpg)

And this is what look on a responsive screen:

 ![pic2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/25699afb4e7143805e80b225270d648edd7a2dc1.PNG)

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?

---

<div class="post-metadata">

**Author:** ![colin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/colin/32/230_2.png) [@colin](https://discourse.processing.org/u/colin)\
**Post date:** [June 13, 2018, 10:45am UTC](https://discourse.processing.org/t/how-to-scale-text-and-image-to-responsive-canvas/909/2 "2018-06-13T10:45:35Z")

</div>

Hi @LoCamillo,

Why don’t you make the size of your text proportional to your canvas size ?

```auto
textSize(x/height);

```

You could also play with constrain() to control your value

```auto
textSize( constrain(x/height, 30, 60) );

```