WPF: Creating overlapping rectangles using canvas

This entry is part 53 of 54 in the series Learn WPF

The following example produces three Rectangle elements, each element 100 pixels. The first Rectangle is red, and its upper-left (x, y) position is specified as (0, 0). The second Rectangle is green, and its upper-left position is (100, 100), which is just below, and to the right of, the first square. The third Rectangle is blue, and its upper-left position is (50, 50).

MainWindow.xaml
<Window x:Class="Ellipse.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas Height="400" Width="400">
        <Canvas Height="100" Width="100" Top="0" Left="0" Background="Red"/>
        <Canvas Height="100" Width="100" Top="100" Left="100" Background="Green"/>
        <Canvas Height="100" Width="100" Top="50" Left="50" Background="Blue"/>
    </Canvas>
</Window>

canvas_rect

 

 

WPF: Creating ellipse or rectangle using canvas

This entry is part 52 of 54 in the series Learn WPF

Using WPF, we can create ellipse or rectangle using XAML canvas.

The following example create a red ellipse and a blue rectangle.

MainWindow.xaml
<Window x:Class="Ellipse.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas>
        <Ellipse Fill="Red" Width="100" Height="60" />
        <Rectangle Fill="Blue" Width="80" Height="80" Canvas.Left="100" Canvas.Top="100" />
        <Button Content="Hello" Canvas.Left="130" Canvas.Top="30" FontSize="20" />
    </Canvas>
</Window>

The output from running the above code is:

ellipse

 

HTML5 Canvas: Canvas tools

This entry is part 3 of 17 in the series HTML5 Canvas

The canvas tools provide a basic set of tools from which you can create a wide range of simple and complex shapes on the canvas.

  • Rectangle: Draws a rectangle at a specific location with a specific width and height
  • Line: Creates a line from point A to point B
  • Path: Creates a path using one or more lines or curves
  • Arc: Creates an arc given particular dimensions and employed to also create circles
  • Curve: Creates one of two types of curves: Bezier or Quadratic
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Canvas Line</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='myCanvas' width='640' height='480'></canvas>
<script>
    var canvas = document.getElementById('myCanvas').getContext('2d');
    canvas.moveTo(0, 0);
    canvas.lineTo(640, 480);
    canvas.stroke();
</script>
</body>
</html>

Here we draw a line using a solid stroke by using canvas.stroke().

HTML5 Canvas: Drawing a line in the canvas

This entry is part 2 of 17 in the series HTML5 Canvas

To draw on the canvas from JavaScript, you first must grab the context of the canvas id you want to draw on.

To do this, your script will get the canvas element by id and then use getContext to grab a reference to the canvas element’s two-dimensional context.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Canvas Line</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='myCanvas' width='640' height='480'></canvas>
<script>
    var canvas = document.getElementById('myCanvas').getContext('2d');
    canvas.moveTo(0, 0);
    canvas.lineTo(640, 480);
    canvas.stroke();
</script>
</body>
</html>

 

HTML5 Canvas: Introduction

This entry is part 1 of 17 in the series HTML5 Canvas

In 2004, Apple developed a pixel-based drawing element named canvas for the Mac OS X dashboard that was later employed in the Safari Browser.

The HTML5 specification has adopted this element and its associated set of APIs to provide basic drawing functionality.

The canvas element or the <canvas> tag gives you a blank surface (thus the name canvas), which you can use to render graphics, images, and text dynamically.

The <canvas> element has the standard attributes of an HTML element. Minimally, you will need the id, width, and height attributes.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Canvas</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<html>
<body>
  <canvas id='myCanvas' width='640' height='480'></canvas>
</body>
</html>