Canvas через view port

[Full-R]

Не могу отмасштабировать canvas элемент у которого contenxt использует для центрюги пикселы, а у меня интерфейс на view port юнитах. Есть ли способ версткой вогнать canvas по масштабу при уменьшении размера окна? Сейчас все элементы нормально плющатся. 

Есть идея перегонять px в vw а потом ставить event на resize чтобы context вправил себе мозги, но это не очень удобно со всех сторон. 

Мастера, есть ли другой способ сделать это версткой?

Вот ссылка на задачу: Rebuild (revolvercmf.ru)

[npofopr]

width: 100%; height: 100% для canvas ?

[Full-R]

12 часов назад, npofopr сказал:

width: 100%; height: 100% для canvas ?

Не работает.

Атрибуты в теге width и height идут в px без обозначения величины, а устанавливаются они через context:

        /* initialise canvas */
        let ctx = g.getContext('2d');

        ctx.canvas.width =  320; //g.closest('body').offsetWidth;
        ctx.canvas.height = 320; //g.closest('body').offsetHeight;

Если мы через атрибут style указываем width и height холст тянется как презик при натягивании и качество рендеринга падает.

vw работает по формуле:

(100 * (100px)) / window.innerWidth

Я переписал движок анимации с px на vw и чуть позже перегоню остальные величины вроде em, pt, pc и так далее тоже.

 

		// Returns metrics and value of given CSS propertie
		numberCSS: (v) => {

			let u = [

				'Q',
				'cap',
				'ch',
				'ic',
				'lh',
				'rlh',
				'px',
				'ex',
				'em',
				'%',
				'in',
				'cm',
				'mm',
				'pt',
				'pc',
				'deg',
				'vmax',
				'vmin',
				'vh',
				'vw',
				'vi',
				'vb',
				'rem',
				'ch',
				'rad',
				'grad',
				'turn',
				'dppx',
				'x',
				'dpcm',
				'dpi',
				'khz',
				'hz',
				's',
				'ms'

			];

			let c = 0;

			for( let i of u ) {

				if( v.includes(i) ) {

					if( i === 'px' ) {

						return [ (100 * +v.replace(i, '')) / self.innerWidth, 'vw' ]; // px to vw

					}

					return [ +v.replace(i, ''), i ];

				}
				else {

					if( c++ === 34 ) {

						if( i === 'px' ) {

							return [ (100 * (v - 0)) / self.innerWidth, 'vw' ]; // px to vw

						}

						return [ v - 0, null ];

					}

				}

			}

		},

 

У меня перед праздниками тугая башка и я ни как не могу понять как статичный холст по window resize отмасштабировать как vw.

Например canvas contenxt был 320x320 при разрешении экрана 1920x1080, а окно уменьшили и холст должен уменьшиться тоже.

Есть идеи какой формулой воспользоваться? Vw и Vh вообще-то могут появиться сами, но кто это сделает нам быстро в браузер? Поэтому хочется просто масштабер наваять на event.

[Full-R]

Не стал трансформировать решил просто вот так:

 

	window.onresize = () => {

		for( let ex of e ) {

			ex.width = ex.closest('.lave-layout').offsetWidth;
			ex.height = ex.closest('.lave-layout').offsetHeight;

		}

	};

 

где ex - это canvas элемент, а .lave-layout - контейнер canvas. вроде работает и не размазывает холст