shimabox/sandbox-transform-scaleX.html

## sandbox-transform-scaleX.html
<!DOCTYPE html>
<html>
<head>
<title>transform: scaleX(-1) されている要素のx座標を求める</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
  background: #b1acacb3;
}

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.container h3 {
  margin: 0;
}

.container canvas {
  width: 320px;
  height: 240px;
  background: #fff;
}

.canvas-wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

#transform-scaleX-canvas {
  transform: scaleX(-1);
}

.desc {
    font-weight: bold;
    text-align: center;
    display: block;
    font-size: 0.9em;
}

</style>
</head>
<body>

<div class="container">

  <div class="buttons">
    <input type="radio" name="scaleX" value="1" id="style_1" checked>
      <label for="style_1">離す</label>
    </input>
    <input type="radio" name="scaleX" value="2" id="style_2">
      <label for="style_2">くっつける</label>
    </input>
    <input type="radio" name="scaleX" value="3" id="style_3">
      <label for="style_3">重ねる</label>
    </input>
  </div>

  <div class="canvas-wrapper">
    <div class="desc"><span>通常</span></div>
    <canvas id="canvas"></canvas>

    <div class="desc"><span>transform: scaleX(-1)</span></div>
    <canvas id="transform-scaleX-canvas"></canvas>

    <div class="desc"><span>(transform: scaleX(-1) されている要素の)<br>x座標 = canvas幅 - x座標 - 文字の幅</span></div>
    <canvas id="not-scaleX-canvas"></canvas>
  </div>
</div>

<script>
'use strict';

const txt = 'あ';
const positionX = 200;

// Top.
const canvas = document.querySelector('#canvas');
const ctx    = canvas.getContext('2d');
ctx.font = "4em 'sans-serif'";
const ctxFontWidth = ctx.measureText(txt).width;
ctx.fillText(txt, positionX, ctxFontWidth);

// Middle.
const scaleXCanvas    = document.querySelector('#transform-scaleX-canvas');
const scaleXCanvasCtx = scaleXCanvas.getContext('2d');
scaleXCanvasCtx.font = "4em 'sans-serif'";
const scaleXCtxFontWidth = scaleXCanvasCtx.measureText(txt).width;
scaleXCanvasCtx.fillText(txt, positionX, scaleXCtxFontWidth);

// Bottom.
const notScaleXCanvas    = document.querySelector('#not-scaleX-canvas');
const notScaleXCanvasCtx = notScaleXCanvas.getContext('2d');
notScaleXCanvasCtx.font = "4em 'sans-serif'";
const notScaleXCtxFontWidth = notScaleXCanvasCtx.measureText(txt).width;
const notScaleXCanvasWidth = notScaleXCanvas.width;
// transform: scaleX(-1) されている要素のx座標 = canvasサイズ - x座標 - 文字の幅
const notScaleXPositionX = notScaleXCanvasWidth - positionX - notScaleXCtxFontWidth;
notScaleXCanvasCtx.fillText(txt, notScaleXPositionX, notScaleXCtxFontWidth);

const wrapper = document.querySelector('.canvas-wrapper');
const buttons = document.querySelector('.buttons');
const radioButtons = document.querySelectorAll('.buttons input[type="radio"]');
Array.from(radioButtons, function(radio) {
    radio.addEventListener('change', function(e){
        switch (this.value) {
            case "2":
                toggleDesc(false);

                wrapper.style.justifyContent = 'initial';
                buttons.style.margin = '0 0 4em 0';

                scaleXCanvas.style.background    = 'rgba(255,255,255, 1)';
                scaleXCanvas.style.position      = 'relative';
                notScaleXCanvas.style.background = 'rgba(255,255,255, 1)';
                notScaleXCanvas.style.position   = 'relative';
                break;
            case "3":
                toggleDesc(false);

                wrapper.style.justifyContent = 'initial';
                buttons.style.margin = '0 0 4em 0';

                scaleXCanvas.style.background    = 'rgba(255,255,255, 0)';
                scaleXCanvas.style.position      = 'absolute';
                notScaleXCanvas.style.background = 'rgba(255,255,255, 0)';
                notScaleXCanvas.style.position   = 'absolute';
                break;
            case "1":
            default:
                toggleDesc(true);

                wrapper.style.justifyContent = 'space-around';
                buttons.style.margin = 0;

                scaleXCanvas.style.background    = 'rgba(255,255,255, 1)';
                scaleXCanvas.style.position      = 'relative';
                notScaleXCanvas.style.background = 'rgba(255,255,255, 1)';
                notScaleXCanvas.style.position   = 'relative';
        }
    });
});

const desc = document.querySelectorAll('.desc');
function toggleDesc(isShow) {
    Array.from(desc, function(elem) {
        if (isShow === true) {
            elem.style.display = 'block';
        } else {
            elem.style.display = 'none';
        }
    });
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>transform: scaleX(-1) されている要素のx座標を求める</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style>
	body {
	background: #b1acacb3;
	}

	.container {
	height: 100vh;
	display: flex;
	align-items: center;
	flex-direction: column;
	}

	.container h3 {
	margin: 0;
	}

	.container canvas {
	width: 320px;
	height: 240px;
	background: #fff;
	}

	.canvas-wrapper {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	}

	#transform-scaleX-canvas {
	transform: scaleX(-1);
	}

	.desc {
	font-weight: bold;
	text-align: center;
	display: block;
	font-size: 0.9em;
	}

	</style>
	</head>
	<body>

	<div class="container">

	<div class="buttons">
	<input type="radio" name="scaleX" value="1" id="style_1" checked>
	<label for="style_1">離す</label>
	</input>
	<input type="radio" name="scaleX" value="2" id="style_2">
	<label for="style_2">くっつける</label>
	</input>
	<input type="radio" name="scaleX" value="3" id="style_3">
	<label for="style_3">重ねる</label>
	</input>
	</div>

	<div class="canvas-wrapper">
	<div class="desc"><span>通常</span></div>
	<canvas id="canvas"></canvas>

	<div class="desc"><span>transform: scaleX(-1)</span></div>
	<canvas id="transform-scaleX-canvas"></canvas>

	<div class="desc"><span>(transform: scaleX(-1) されている要素の)<br>x座標 = canvas幅 - x座標 - 文字の幅</span></div>
	<canvas id="not-scaleX-canvas"></canvas>
	</div>
	</div>

	<script>
	'use strict';

	const txt = 'あ';
	const positionX = 200;

	// Top.
	const canvas = document.querySelector('#canvas');
	const ctx = canvas.getContext('2d');
	ctx.font = "4em 'sans-serif'";
	const ctxFontWidth = ctx.measureText(txt).width;
	ctx.fillText(txt, positionX, ctxFontWidth);

	// Middle.
	const scaleXCanvas = document.querySelector('#transform-scaleX-canvas');
	const scaleXCanvasCtx = scaleXCanvas.getContext('2d');
	scaleXCanvasCtx.font = "4em 'sans-serif'";
	const scaleXCtxFontWidth = scaleXCanvasCtx.measureText(txt).width;
	scaleXCanvasCtx.fillText(txt, positionX, scaleXCtxFontWidth);

	// Bottom.
	const notScaleXCanvas = document.querySelector('#not-scaleX-canvas');
	const notScaleXCanvasCtx = notScaleXCanvas.getContext('2d');
	notScaleXCanvasCtx.font = "4em 'sans-serif'";
	const notScaleXCtxFontWidth = notScaleXCanvasCtx.measureText(txt).width;
	const notScaleXCanvasWidth = notScaleXCanvas.width;
	// transform: scaleX(-1) されている要素のx座標 = canvasサイズ - x座標 - 文字の幅
	const notScaleXPositionX = notScaleXCanvasWidth - positionX - notScaleXCtxFontWidth;
	notScaleXCanvasCtx.fillText(txt, notScaleXPositionX, notScaleXCtxFontWidth);

	const wrapper = document.querySelector('.canvas-wrapper');
	const buttons = document.querySelector('.buttons');
	const radioButtons = document.querySelectorAll('.buttons input[type="radio"]');
	Array.from(radioButtons, function(radio) {
	radio.addEventListener('change', function(e){
	switch (this.value) {
	case "2":
	toggleDesc(false);

	wrapper.style.justifyContent = 'initial';
	buttons.style.margin = '0 0 4em 0';

	scaleXCanvas.style.background = 'rgba(255,255,255, 1)';
	scaleXCanvas.style.position = 'relative';
	notScaleXCanvas.style.background = 'rgba(255,255,255, 1)';
	notScaleXCanvas.style.position = 'relative';
	break;
	case "3":
	toggleDesc(false);

	wrapper.style.justifyContent = 'initial';
	buttons.style.margin = '0 0 4em 0';

	scaleXCanvas.style.background = 'rgba(255,255,255, 0)';
	scaleXCanvas.style.position = 'absolute';
	notScaleXCanvas.style.background = 'rgba(255,255,255, 0)';
	notScaleXCanvas.style.position = 'absolute';
	break;
	case "1":
	default:
	toggleDesc(true);

	wrapper.style.justifyContent = 'space-around';
	buttons.style.margin = 0;

	scaleXCanvas.style.background = 'rgba(255,255,255, 1)';
	scaleXCanvas.style.position = 'relative';
	notScaleXCanvas.style.background = 'rgba(255,255,255, 1)';
	notScaleXCanvas.style.position = 'relative';
	}
	});
	});

	const desc = document.querySelectorAll('.desc');
	function toggleDesc(isShow) {
	Array.from(desc, function(elem) {
	if (isShow === true) {
	elem.style.display = 'block';
	} else {
	elem.style.display = 'none';
	}
	});
	}
	</script>
	</body>
	</html>