Create Gradient on Canvas using HTML5

Browse more Javascript Examples
<!DOCTYPE html>
<html>
    <head>
<title>Web Page Design</title>



<style>
  
  body{
      
      background-image: linear-gradient( to right, crimson , indigo , darkorange  );
  }
  
  #canvas{
      
      margin-left: 20px;
      margin-right: 0;
      margin-bottom: 20px;
      border: thin solid #aaaaaa;
      cursor: crosshair;
      padding: 0;
      
  }
  
  #controls{
      margin: 20px 20px 20px 20px;
  }
  #rubberbandDiv{
      
      position: absolute;
      border: 3px solid blue;
      cursor: crosshair;
      display: none;
      
  }
  
</style>

</head>
<body>
    
    
    <div id="controls">
        
        <input type="button" id="resetButton" value="Reset" />
        
    </div>
    
    <div id="rubberbandDiv"></div>
    
    
    <canvas id="canvas" width="800" height="520">
        
        
        
    </canvas>
    
    

    
  <script>


    var canvas = document.getElementById('canvas');
     
    var context = canvas.getContext("2d");
    
    var rubberbandDiv = document.getElementById("rubberbandDiv");
    var resetButton = document.getElementById("resetButton");
    var image = new Image();
    var mouseDown = {};
    var rubberbandRectangle = {};
    var dragging = false;
    image.src = "https://www.4usky.com/data/out/74/164662929-quake-wallpapers.jpg";
   
    
function rubberbandStart(x,y)
{
        mouseDown.x = x;
        mouseDown.y = y;
        
        
        rubberbandRectangle.left = x;
        rubberbandRectangle.top = y;
        
        moveRubberbandDiv();
        showRubberbandDiv();
        
        dragging = true;
}
    
function rubberbandStretch(x,y)
{
        rubberbandRectangle.left = x < mouseDown.x ? x:mouseDown.x;
        rubberbandRectangle.top = y < mouseDown.y ? y:mouseDown.y;
        
        
        rubberbandRectangle.width = Math.abs(rubberbandRectangle.left - mouseDown.x),
        rubberbandRectangle.height = Math.abs(rubberbandRectangle.top+mouseDown.y);
        
        moveRubberbandDiv();
        resizeRubberbandDiv();
}
    
function rubberbandEnd()
{
        var bbox = canvas.getBoundingClientRect();
        
        try{
            
            context.drawImage(canvas, rubberbandRectangle.left - bbox.left,
            rubberbandRectangle.top - bbox.top,rubberbandRectangle.width, rubberbandRectangle.height,0,0,canvas.width, canvas.height);
            
        }
        catch(E)
        {
            E.printStackTrace();
        }
            
            resetRubberbandRectangle();
            
            rubberbandDiv.style.width = 0;
            rubberbandDiv.style.height=0;
            
            hideRubberbandDiv();
            
            dragging = false;
    }


function moveRubberbandDiv()
{
    rubberbandDiv.style.top = rubberbandRectangle.top + "px";
    rubberbandDiv.style.left = rubberbandRectangle.left + "px";
}

function resizeRubberbandDiv()
{
    rubberbandDiv.style.width = rubberbandRectangle.width + "px";
    rubberbandDiv.style.height = rubberbandRectangle.height = "px";
    
}

function showRubberbandDiv()
{
    rubberbandDiv.style.display = "inline";
    
}
    
function hideRubberbandDiv()
{
    rubberbandDiv.style.display = "none";
}

function resetRubberbandRectangle()
{
    rubberbandRectangle = { top: 0, left: 0, width: 0, height: 0 };
}

canvas.onmousedown = function(e){
     
    var x = e.clientX,
    y = e.clientY;
    e.preventDefault();
    rubberbandStart(x,y);
    
   
};

window.onmousemove = function(e)
{
    var x = e.clientX;
    var y = e.clientY;
    
    e.preventDefault();
    if(dragging){
        rubberbandStretch(x,y);
    }
};


window.onmouseup = function(e)
{
    e.preventDefault();
    rubberbandEnd();
};

image.onload = function()
{
    context.drawImage(image, 0, 0, canvas.width , canvas.height);
};

resetButton.onclick = function(e)
{
    context.clearRect(0,0,context.canvas.width,context.canvas.height);
    context.drawImage(image,0,0,canvas.width,canvas.height);
}


</script>  
    
    
    
    
    
    
</body>
</html>
Create Gradient on Canvas using HTML5

Follow

Newsletter
