Skip to main content

JavaScript Painting with Canvas

I spent some time today messing with JavaScript canvas stuff. Here's a simple paint snippet. Enjoy.
<head>
  <script>
    function draw() {
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "black";
      ctx.beginPath();

      var x;
      var y;

      canvas.onmousedown = function(e) {
        x = e.clientX;
        y = e.clientY;
        ctx.moveTo(x, y);
      }

      canvas.onmouseup = function(e) {
        x = null;
        y = null;
      }

      canvas.onmousemove = function(e) {
        if (x == null || y == null) {
          return;
        }
        x = e.clientX;
        y = e.clientY;
        x -= canvas.offsetLeft;
        y -= canvas.offsetTop;
        ctx.lineTo(x, y);
        ctx.stroke();
        ctx.moveTo(x, y);
      }
    };
  </script>
</head>
<body onload="draw();">
  <canvas id="canvas" width="300" height="300"
  style="border: 1px solid black;"></canvas>
</body>
Labels:

Popular posts from this blog

Bot Commander r1 Released

I just published Bot Commander , the code for my Lego NXT rover . There's a lot left to be done, but release early and often, right? Currently it provides a UI for controlling the direction and speed of all three motor ports on the NXT brick. You can link motors together to adjust their speed in unison. In addition, you can enable "Tilt Control" for a steering-wheel-type experience. To use tilt control: Hook up motor A and B to be the left and right wheels of your vehicle. Hold the phone sideways (i.e. landscape). Tilt the phone forward and backward to drive forward and backward. Turn the phone right and left (like a steering wheel) to steer right and left. As you tilt the phone, you'll see the UI update the slider controls for the speed of motors A and B. I plan to expand the UI to provide a lot more than just motor control. Before that, though, I'll push a JAR to make it easy to integrate control of Lego NXT robots into your own Android project. The code...
Read more

Email Injection

Not so long ago, I ran a wiki called SecurePHP. On that wiki, there was one particular article about email injection that received a lot of attention. Naturally, with all the attention came lots of spam. As a result, I disabled editing of the wiki and content stagnated. Still, the email injection article remained popular. About a year later, the server that hosted SecurePHP died and I never had a chance to hook it all back up. I saved the article though and I'm reposting it now. It may be a bit old (I've been away from PHP for a long time), and I didn't write all of it, so feel free to leave comments about needed updates and corrections. Though this article focuses on PHP, it provides a lot of general information regarding email injection attacks. The PHP mail() Function There are a lot of ways to send anonymous emails, some use it to mass mail, some use it to spoof identity, and some (a few) use it to send email anonymously. Usually a web mailform using the mail() funct...
Read more

XBee ZNet 2.5 Wireless Accelerometer

I managed to put together a wireless accelerometer the other night using my two new XBees, an Arduino XBee shield, an XBee Explorer USB, an ADXL330, and some Python. I struggled a bit with some of it, so here's what I learned: First, a parts list. XBee 2mW Series 2.5 Chip Antenna Arduino XBee (with XBee Series 2.5 module) XBee Explorer USB ADXL330 I'm not sure exactly what the specs are on the XBee that comes with the Arduino shield. But, it is definitely a series 2.5. The first thing to do is to configure and upgrade the firmware on your XBees. To do that, you'll need X-CTU (for the firmware upgrade at least, but it's also nice for configuration) which, unfortunately, is only available for Windows. But, it works fine from VMware. First up, the XBee we'll hook up to the computer to read incoming data from the accelerometer: Plug one of the XBees into the Explorer (it's also possible to do this from the Arduino shield by shifting the two XBee/USB jumpers to USB...
Read more