CODEWITHSUNDEEP
javascripthtmlcsscanvas
Lisa
Lisa

Reputation: 416

Can I add CSS effects to a masked Canvas image?

If I have done image masking with the canvas element, how can I apply CSS to the mask it self, and not the hole canvas? Is it not possible?

I´m trying to do a portfolio with triangle shaped images. When I hover over an image I want a little colored field to show some text along the bottom line of the triangle. I have done image masking with the canvas element in order to get the triangle shapes. So my question is how to apply css to the triangle shaped mask? I can only make it so it applies to the hole canvas but since the image is a triangle I need the pop up field to be cut off outside the mask like the pictures are.

I´m a newbie so I´m sorry if it´s a stupid question:)

Here is my code so far:

HTML:

 <body>
    <h3>Masks</h2>

    <ul id="portfolio">
    <li><canvas id="canvas01" width="400" height="330"><img src="canvas01.png" id="image01" class="image" alt="" /></canvas><div>First</div></li>
    <li><canvas id="canvas02" width="400" height="330"><img src="canvas02.png" id="image02" class="image" alt="" />Second</canvas></li>
    <li><canvas id="canvas03" width="400" height="330"><img src="canvas03.png" id="image03" class="image" alt="" />Third</canvas></li>
    </ul>

  </body>

Javascript:

function masks() {  
            var canvas01 = document.getElementById("canvas01");
            if (canvas01.getContext) {
                var ctx = canvas01.getContext("2d");
                //Load the image.
                var img = document.getElementById("image01");
                ctx.fillStyle = "#f30";
                ctx.beginPath();
                ctx.moveTo(canvas01.width / 2, 0);
                ctx.lineTo(canvas01.width, canvas01.height);            
                ctx.lineTo(0, canvas01.height);
                ctx.closePath();                                          
                ctx.clip();                        
                ctx.drawImage(img,0,0);
            }
            var canvas02 = document.getElementById("canvas02");
            if (canvas02.getContext) {
                var ctx = canvas02.getContext("2d");
                //Load the image.
                var img = document.getElementById("image02");
                ctx.fillStyle = "#f30";
                ctx.beginPath();
                ctx.moveTo(canvas02.width / 2, 0);
                ctx.lineTo(canvas02.width, canvas02.height);            
                ctx.lineTo(0, canvas02.height);
                ctx.closePath();                                          
                ctx.clip();                        
                ctx.drawImage(img,0,0);
            }
            var canvas03 = document.getElementById("canvas03");
            if (canvas03.getContext) {
                var ctx = canvas03.getContext("2d");
                //Load the image.
                var img = document.getElementById("image03");
                ctx.fillStyle = "#f30";
                ctx.beginPath();
                ctx.moveTo(canvas03.width / 2, 0);
                ctx.lineTo(canvas03.width, canvas03.height);            
                ctx.lineTo(0, canvas03.height);
                ctx.closePath();                                          
                ctx.clip();                        
                ctx.drawImage(img,0,0);
            }
        };

Upvotes: 1

Views: 1936

Answers (1)

markE
markE

Reputation: 105035

You can't apply CSS to the mask on the canvas.

Your triangle is not a DOM object you can manipulate.

Your triangle is just a bunch of pixels drawn on the canvas.

However canvas is capable of drawing your 3 labeled triangular images

enter image description hereenter image description here

The reusable function below takes in:

  • The context of the canvas you want to draw on
  • The image object you want to draw+clip
  • The text you want to draw at the bottom of the triangle

If you supply text, the bottom red bar and text will be drawn.

If you don't supply text, the bar and text will not be drawn.

Therefore, you could toggle the text on/off in response to mouse hovers.

Here's the code for the one function that will draw all 3 of your triangles

    function draw(ctx,img,text){
        ctx.beginPath();
        ctx.moveTo(canvas.width / 2, 0);
        ctx.lineTo(canvas.width, canvas.height);            
        ctx.lineTo(0, canvas.height);
        ctx.closePath();                                          
        ctx.clip();                        
        ctx.drawImage(img,0,0);
        if(text){
            ctx.fillStyle = "#f30";
            ctx.fillRect(0,canvas.height-20,canvas.width,20);
            ctx.fillStyle = "black";
            ctx.font="14pt Verdana";
            var textWidth=ctx.measureText(text).width;
            ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3);
        }


    }

Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/S9vS8/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.onload=function(){
        draw(ctx,img,"Hello!");
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sky-bg2.jpg";


    function draw(ctx,img,text){
        ctx.beginPath();
        ctx.moveTo(canvas.width / 2, 0);
        ctx.lineTo(canvas.width, canvas.height);            
        ctx.lineTo(0, canvas.height);
        ctx.closePath();                                          
        ctx.clip();                        
        ctx.drawImage(img,0,0);
        if(text){
            ctx.fillStyle = "#f30";
            ctx.fillRect(0,canvas.height-20,canvas.width,20);
            ctx.fillStyle = "black";
            ctx.font="14pt Verdana";
            var textWidth=ctx.measureText(text).width;
            ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3);
        }


    }



}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

[Here's code without the jquery]

<!doctype html>
<html>
<head>
<style>
    body{ background-color: ivory; padding:10px; }
    #canvas{border:1px solid lightgray;}
</style>

<script>
window.onload=function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.onload=function(){
        draw(ctx,img,"Hello!");
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sky-bg2.jpg";


    function draw(ctx,img,text){
        ctx.beginPath();
        ctx.moveTo(canvas.width / 2, 0);
        ctx.lineTo(canvas.width, canvas.height);            
        ctx.lineTo(0, canvas.height);
        ctx.closePath();                                          
        ctx.clip();                        
        ctx.drawImage(img,0,0);
        if(text){
            ctx.fillStyle = "#f30";
            ctx.fillRect(0,canvas.height-20,canvas.width,20);
            ctx.fillStyle = "black";
            ctx.font="14pt Verdana";
            var textWidth=ctx.measureText(text).width;
            ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3);
        }
    }

};  // end window.onload


</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Upvotes: 3

Related Questions