7 Replies - 419 Views - Last Post: 10 August 2017 - 10:16 AM

#1 Surprised  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 06-August 17

HTML image Canvas, issue with higher resolution screens

Posted 06 August 2017 - 11:28 PM

Hi all,

First of all I'm new to this forum and only have a really basic knowledge about html and css, nothing special at all.
To inform you a bit about the backstory of my project... I'm a 3D printing Enthusiast and trying to start a webshop soon for some products that customers can customize. (because family members told me that I should)
For customizing this I started creating a tool with a friend, but he's on holidays for 2 weeks now unfortunately so I'm totally stuck on this.

In the tool customers can add images etc to customize their product, just like a photo book. but the problem with those higher resolution devices is that the canvas won't work properly, if they add an image or icon the canvas isn't able to being used entirely. So my guess I have to put in some lines that will scale all devices to the same resolution, but I can't seem to get that working.
You can find my tool at Surprised Configurator

https://ibb.co/dGZ8XF

All the coding is visible in the tool and if you guys could tell me what I'm doing wrong would be highly appreciated.

cheers,
Tom

Is This A Good Question/Topic? 0
  • +

Replies To: HTML image Canvas, issue with higher resolution screens

#2 Surprised  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 06-August 17

Re: HTML image Canvas, issue with higher resolution screens

Posted 06 August 2017 - 11:51 PM

I messed up with the picture, so here it is again.
Posted Image
Was This Post Helpful? 0
  • +
  • -

#3 Surprised  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 06-August 17

Re: HTML image Canvas, issue with higher resolution screens

Posted 07 August 2017 - 05:47 AM

View PostSurprised, on 06 August 2017 - 11:28 PM, said:

You can find my tool at Surprised Configurator


And apparently my link to the tool wasnt working either... :(/>
Surprised Configurator
Was This Post Helpful? 0
  • +
  • -

#4 dday9  Icon User is offline

  • D.I.C Regular

Reputation: 94
  • View blog
  • Posts: 495
  • Joined: 17-April 13

Re: HTML image Canvas, issue with higher resolution screens

Posted 07 August 2017 - 07:43 AM

You should look into SVG files, it stands for Scalable Vector Graphic. Essentially it uses XML to draw objects and because of this it is easily scalable between lower and higher resolutions. You can use SVG tags directly in your HTML or in your CSS (though I personally prefer the former).
Was This Post Helpful? 0
  • +
  • -

#5 Surprised  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 06-August 17

Re: HTML image Canvas, issue with higher resolution screens

Posted 07 August 2017 - 08:08 AM

View Postdday9, on 07 August 2017 - 07:43 AM, said:

You should look into SVG files, it stands for Scalable Vector Graphic. Essentially it uses XML to draw objects and because of this it is easily scalable between lower and higher resolutions. You can use SVG tags directly in your HTML or in your CSS (though I personally prefer the former).


I'm not sure what you mean with that? the people will put jpg, png, ... files in the tool and arrange them as they prefer.
In the end they export it all to a png file which they'll upload in the basket when they order.
The problem is that on high dpi devices the canvas is glitching, so the canvas is being seen entirely but the images which are uploaded will not be fitting entirely in that canvas strange enough.

So I thought I needed to do some dpi/pixel scaling so that it's all the same for every device. However I can't seem to get that working.
Was This Post Helpful? 0
  • +
  • -

#6 dday9  Icon User is offline

  • D.I.C Regular

Reputation: 94
  • View blog
  • Posts: 495
  • Joined: 17-April 13

Re: HTML image Canvas, issue with higher resolution screens

Posted 07 August 2017 - 08:27 AM

OK, I misunderstood what you meant. I had thought that you were providing the user the option to select from a collection of images (which I was suggesting to use SVGs) and the images that you were using now weren't scaling properly.
Was This Post Helpful? 0
  • +
  • -

#7 Surprised  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 06-August 17

Re: HTML image Canvas, issue with higher resolution screens

Posted 07 August 2017 - 08:41 AM

Does anybody else knows how to resolve/fix this?
Thanks in advance!
Was This Post Helpful? 0
  • +
  • -

#8 ge∅  Icon User is offline

  • D.I.C Lover

Reputation: 180
  • View blog
  • Posts: 1,126
  • Joined: 21-November 13

Re: HTML image Canvas, issue with higher resolution screens

Posted 10 August 2017 - 10:16 AM

Hi,

First of all, I want to make sure you know you can use your desktop browser's developer tools to debug a web page rendered on your phone (or else). For Firefox it's WebIDE, for Safari it's built in, I don't use Chrome... In any case, you have to allow either USB or wifi debugging on your device. I strongly advise to do it, otherwise it will be a pain for you to do anything.

I don't have the time to inspect your app on another device and read your code, but I suggest you start with this : https://developer.mo...evicePixelRatio . I use it to make my canvas apps sharper on high res devices, but I don't recommend to override the property as told in the article (actually, I am surprised it does anything). Just read it to get a multiplying factor and work out what to do.

Good luck.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1