Set background color and image to canvas using javascript - Javascript Canvas

Javascript examples for Canvas:image

  1. HOME
  2. Javascript
  3. Canvas
  4. image

Description

Set background color and image to canvas using javascript

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>setBackgroundColor examples</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script> 
      <style id="compiled-css" type="text/css">

canvas {//from   w w w  .ja v  a  2s .c o m
   border: 1px solid #999;
}
button {
   margin-top: 20px;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
// Do some initializing stuff
fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 5
});

var canvas = window._canvas = new fabric.Canvas('c');
canvas.setBackgroundColor({source: 'http://fabricjs.com/assets/escheresque_ste.png'}, canvas.renderAll.bind(canvas));
fabric.util.addListener(document.getElementById('toggle-repeat'), 'click', function () {
    if (!canvas.backgroundColor instanceof fabric.Pattern) return;
    canvas.backgroundColor.repeat = canvas.backgroundColor.repeat === 'repeat'
        ? 'repeat-x'
        : canvas.backgroundColor.repeat === 'repeat-x'
            ? 'repeat-y'
            : canvas.backgroundColor.repeat === 'repeat-y'
                ? 'no-repeat'
                : 'repeat';
    canvas.renderAll();
});
fabric.util.addListener(document.getElementById('toggle-bgcolor'), 'click', function () {
    if (canvas.backgroundColor instanceof fabric.Pattern) {
        canvas.setBackgroundColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas));
    }
    else {
        canvas.setBackgroundColor({source: 'http://fabricjs.com/assets/escheresque_ste.png'}, canvas.renderAll.bind(canvas));
    }
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="c" width="400" height="400"></canvas> 
      <button id="toggle-repeat">Toggle repeat</button> 
      <button id="toggle-bgcolor">Toggle background</button>  
   </body>
</html>

Related Tutorials