<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas в HTML5</title>
</head>
<body>
<canvas id='test' width='1250px' height='600px'></canvas>
<script>
image = new Image()
var image = document.createElement('img'),
context = document.getElementById('test').getContext('2d');
image.onload = function() {
context.fillStyle = context.createPattern(image, 'no-repeat');
context.strokeStyle='red'
context.font = '200px Verdana'
//Окантовка для букв
context.fillText('Hello', 0, 300);
//Окантовка для букв
context.strokeText('Hello', 0, 300);
};
image.src = '1.jpg';
//Сдвиг тени право
context.shadowOffsetX = 50
//Сдвиг тени вниз
context.shadowOffsetY = 100
//размытость
context.shadowBlur = 15
context.shadowColor = 'brown'
//context.strokeStyle('red');
// ctx.fillStyle = 'lightblue';
//Заливаем фигуру голубым цветом
//ctx.fillRect(10, 10, 50, 50);
//Делаем окантовку красным цветом
//ctx.strokeStyle='red'
//ctx.strokeRect(10, 10, 50, 50);
</script>
</body>
</html> |