How do you fill Text in Canvas with Image?

StackOverflow https://stackoverflow.com/questions/19268904

  •  30-06-2022
  •  | 
  •  

Frage

I've been working with the HTML5 canvas recently and was wondering if there was a way to fill Text with an image instead of a solid color?

I can currently get something like this to work:

What I can do

But I need the text to look something like (can be done in Photoshop):

Example

I've read numerous times about sometimes having to render parts on an image on a 2nd canvas and importing the drawing to the main-visible canvas, but most of that was about tinting images (not sure if that would work here).

Why I need this: As you can see the controller above is nice and shinny, but the text isn't and the client wants me to pull the text color from the different controller shell colors to make it look at realistic as possible.

While searching some more I did happen to find this example, which is exactly what I want. But unfortunately the problem with the example is that I would then need to somehow export only the text of the image, which I don't think is possible, so it can be transposed into the new image without the black outer layer covering part of the controller.

If someone would please send me in the right direction, no matter how complex, I will greatly appreciate it.

P.S. Here if the draw Order of the controller:

  1. Shell
  2. Text
  3. Parts/Back
  4. Thumb Sticks
  5. Guide Button
  6. ABXY Buttons
  7. Mask around controller (prevent text overflow)
War es hilfreich?

Lösung

You can use compositing to replace the opaque text pixels with an overlaid image

enter image description here

This code uses context.globalCompositeOperation="source-in" to replace only the text pixels with the corresponding pixels of an image:

// put text on canvas
ctx.beginPath();
ctx.font="72pt Verdana";
ctx.fillText("XBOX",10,100);
ctx.fill();


// use compositing to draw the background image
// only where the text has been drawn
ctx.beginPath();
ctx.globalCompositeOperation="source-in";
ctx.drawImage(img,0,0);

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/atM4m/

<!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=document.createElement("img");
    img.onload=function(){
       draw();
    }
    img.src="http://images4.fanpop.com/image/photos/23400000/water-water-23444632-2048-1277.jpg";

    function draw(x){

      ctx.save();
      ctx.beginPath();

      // put text on canvas
      ctx.font="72pt Verdana";
      ctx.fillText("XBOX",10,100);
      ctx.fill();


      // use compositing to draw the background image
      // only where the text has been drawn
      ctx.beginPath();
      ctx.globalCompositeOperation="source-in";
      ctx.drawImage(img,0,0);
      ctx.restore();
    }





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

</head>

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

Andere Tipps

To fill in the text with a pattern I use this:

  canvas               = document.getElementById("myCanvas")
  context              = canvas.getContext('2d')
  context.font         = 'bold 140px Times'
  context.textBaseline = 'top'
  image                = new Image()
  image.src            = 'myImage.jpg'

  image.onload = function()
  {
    pattern           = context.createPattern(image, 'repeat')
    context.fillStyle = pattern
    context.fillText(  'XBOX', 0, 0)
  }

reference: Learning PHP, MySQL & JavaScript_ With jQuery, CSS & HTML5-O’Reilly Media,Nixon Robin - (2018)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top