works fine with webGL but parts dont show up with canvas

spreatics

some parts are not showing in canvas, I tried web-gl with very same assets(atlas, png, json) and checked it works fine with webgl.

below are my source. T.T

I need to finish this project before this weekend. T.T help plz...

<html>
    <head>
        <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>
        전자액자
    </title>

    <script src="include/js/jquery-3.3.1.min.js"></script>

    <script src="spine_canvas/build/spine-canvas.js"></script>

    <style>
        body #canvas {
            width: 100%;
            height: 416px;
            cursor: pointer;
        }
    </style>
</head>

<body>
  <canvas id="canvas" onclick="change_animation();"></canvas>

    <script>
        //spine/////////////////////////////////////////////////////////////////////////////////////////////////////////////
        var lastFrameTime = Date.now() / 1000;
        var canvas, context;
        var assetManager;
        var skeleton, state, bounds;
        var skeletonRenderer;

        var bgColor = "#FDF5E6";
        var assetDirectory = "spine_canvas/assets/";

     var skelName = "taad";
     //boring, default, happy, hungry, message, sleep
        var animName = "a_default";

        function init(){
            canvas = document.getElementById( "canvas" );
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            context = canvas.getContext( "2d" );

            skeletonRenderer = new spine.canvas.SkeletonRenderer( context );

            assetManager = new spine.canvas.AssetManager();

            assetManager.loadText( assetDirectory + skelName + ".json" );
            assetManager.loadText( assetDirectory + skelName + ".atlas");
            assetManager.loadTexture( assetDirectory + skelName + ".png");

            requestAnimationFrame( load );
        }

        function load(){
            if ( assetManager.isLoadingComplete() ){
                var data = loadSkeleton( skelName, animName, "default" );
                skeleton = data.skeleton;
                state = data.state;
                bounds = data.bounds;
                requestAnimationFrame( render );
            }
            else {
                requestAnimationFrame( load );
            }
        }

        var animationState;

        function loadSkeleton( name, initialAnimation, skin ){
            if ( skin === undefined ) skin = "default";

            atlas = new spine.TextureAtlas( assetManager.get( assetDirectory + name + ".atlas"), function( path ){
                return assetManager.get( assetDirectory + path );
            });

            atlasLoader = new spine.AtlasAttachmentLoader( atlas );

            var skeletonJson = new spine.SkeletonJson( atlasLoader );

            var skeletonData = skeletonJson.readSkeletonData( assetManager.get( assetDirectory + name + ".json" ) );
            var skeleton = new spine.Skeleton( skeletonData );
            skeleton.flipY = true;
            var bounds = calculateBounds( skeleton );
            skeleton.setSkinByName( skin );

            animationState = new spine.AnimationState( new spine.AnimationStateData( skeleton.data ) );
            animationState.setAnimation( 0, initialAnimation, true );
            animationState.addListener({
                event: function( trackIndex, event ){
                    // console.log("Event on track " + trackIndex + ": " + JSON.stringify(event));
                },
                complete: function( trackIndex, loopCount ){
                    // console.log("Animation on track " + trackIndex + " completed, loop count: " + loopCount);
                },
                start: function( trackIndex ){
                    // console.log("Animation on track " + trackIndex + " started");
                },
                end: function( trackIndex ){
                    // console.log("Animation on track " + trackIndex + " ended");
                }
            })

            return { skeleton: skeleton, state: animationState, bounds: bounds };
        }

        function calculateBounds( skeleton ){
            var data = skeleton.data;
            skeleton.setToSetupPose();
            skeleton.updateWorldTransform();
            var offset = new spine.Vector2();
            var size = new spine.Vector2();
            skeleton.getBounds( offset, size, [] );

            return { offset: offset, size: size };
        }

        function render(){
            var now = Date.now() / 1000;
            var delta = now - lastFrameTime;
            lastFrameTime = now;

            resize();

            context.save();
            context.setTransform( 1, 0, 0, 1, 0, 0 );
            context.fillStyle = bgColor;
            context.fillRect( 0, 0, canvas.width, canvas.height );
            context.restore();

            state.update( delta );
            state.apply( skeleton );
            skeleton.updateWorldTransform();
            skeletonRenderer.draw( skeleton );

            requestAnimationFrame( render );
        }

        function resize(){
            var w = canvas.clientWidth;
            var h = canvas.clientHeight;
            if ( canvas.width != w || canvas.height != h ){
                canvas.width = w;
                canvas.height = h;
            }

            // magic
            var centerX = bounds.offset.x + bounds.size.x / 2;
            var centerY = bounds.offset.y + bounds.size.y / 2;
            var scaleX = bounds.size.x / canvas.width;
            var scaleY = bounds.size.y / canvas.height;
            var scale = Math.max( scaleX, scaleY ) * 1.2;
            if ( scale < 1 ) scale = 1;
            var width = canvas.width * scale;
            var height = canvas.height * scale;

            context.setTransform( 1, 0, 0, 1, 0, 0 );
            context.scale( 1 / scale, 1 / scale );
            context.translate( -centerX, -centerY );
            context.translate( width / 2, height / 2 );
        }

        (function() {
            init();
        }());
        //spine/////////////////////////////////////////////////////////////////////////////////////////////////////////////
  </script>
</body>
</html>

Nate

FWIW, your link gives me only Cannot GET /spine.html but I see the screenshot of the problem.

Please see the compatibility notes here:
spine-runtimes/spine-ts at 3.8

spine-ts Canvas does not support color tinting, mesh attachments and clipping. Only the alpha channel from tint colors is applied. Experimental support for mesh attachments can be enabled by setting spine.canvas.SkeletonRenderer.useTriangleRendering to true. Note that this method is slow and may lead to artifacts on some browsers.

spreatics

sorry! I changed url to http://spreatics.com:3000/
plus, I solved the problem with SkeletonRenderer.useTriangleRendering = true
Thanks a million!

Nate wrote
FWIW, your link gives me only Cannot GET /spine.html but I see the screenshot of the problem.

Please see the compatibility notes here:
spine-runtimes/spine-ts at 3.8

spine-ts Canvas does not support color tinting, mesh attachments and clipping. Only the alpha channel from tint colors is applied. Experimental support for mesh attachments can be enabled by setting spine.canvas.SkeletonRenderer.useTriangleRendering to true. Note that this method is slow and may lead to artifacts on some browsers.

Mario

Note that this feature in spine-ts Canvas is highly experimental. Pretty much only Chrome renders triangles correctly. Other browsers will show sampling artifacts. It also causes a slow down. If you can, switch to spine-ts WebGL.