JSFiddle - React, Tailwind, and code Playground

by takeshi1234

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>pixi.jsお試し用</title>

    <!-- pixi.jsの本体の読み込み -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.1/pixi.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Mwni/pixi-mousewheel/dist/pixi-mousewheel.js"></script>

</head>

<body>
    <main id="app">
        <!-- ここにPixiの描画領域(Canvas)が入る -->
    </main>
</body>
<script>
    let app = new PIXI.Application({
        width: 800,
        height: 800,
        backgroundColor: 0x1099bb,
    });
    let el = document.getElementById('app');
    el.appendChild(app.view);

    // Actually use textures
    // let butaTexture = new PIXI.Texture.from('../../en.png');
    // let butaSprite = new PIXI.Sprite(butaTexture);

    // A picture instead of 8000px * 8000px image
    var butaSprite1 = new PIXI.Graphics();
    butaSprite1.lineStyle(2, 0xFEEB77, 1);
    butaSprite1.beginFill(0xFF0F5F, 1);
    butaSprite1.drawRect(0, 0, 8000, 8000);
    butaSprite1.endFill();
    var butaSprite = new PIXI.Graphics();
    butaSprite.lineStyle(2, 0xFEEB77, 1);
    butaSprite.beginFill(0x650A5A, 1);
    butaSprite.drawCircle(0, 0, 8000);
    butaSprite.endFill();

    console.log(app.screen.width, butaSprite.width)
    scale = app.screen.width / butaSprite.width;
    console.log(butaSprite.width)
    console.log(scale)

    butaSprite.scale.x = butaSprite.scale.y = scale;
    butaSprite.x = butaSprite.y = 400; //half

    app.stage.addChild(butaSprite1);
    app.stage.addChild(butaSprite);


    app.stage.interactiveMousewheel = true
    app.stage.on('mousewheel', (delta, event) => {
        var scaleBy = 1.1;
        var oldScale = app.stage.scale.x;
        console.log(oldScale)
        console.log(event)
        var mousePointTo = {
            x: event.x / oldScale - app.stage.y / oldScale,
            y: event.y / oldScale -...