var canvas = document.getElementById("canvas")

var context = canvas.getContext("2d")

var image = new Image()

function drawImageByScale(scale) {

var imageWidth = 500 * scale

var imageHeight = 500 * scale

x = canvas.width / 2 - imageWidth / 2

y = canvas.height / 2 - imageHeight / 2

context.clearRect(0, 0, canvas.width, canvas.height)

context.drawImage(image, x, y, imageWidth, imageHeight)

}

window.onload = function() {

canvas.width = 500

canvas.height = 500

image.src = "http://www.jq22.com/img/cs/500x500-2.png"

image.onload = function() {

drawImageByScale(1)

// 设置水印canvas

//setup watermark canvas

watermarkCanvas.width = 300

watermarkCanvas.height = 100

var watermarkContext = watermarkCanvas.getContext("2d")

watermarkContext.font = "bold 20px Arial"

watermarkContext.lineWidth = "1"

watermarkContext.fillStyle = "rgba( 255 , 255 , 255 , 0.5 )"

watermarkContext.textBaseline = "middle";

watermarkContext.fillText("== 水印 ==", 20, 50)

// 然后把该水印canvas画在图片canvas上就行

// 比如这样来添加

context.drawImage(watermarkCanvas, canvas.width - watermarkCanvas.width, canvas.height - watermarkCanvas.height)

}

}