Lockdown obfuscates code snippets by writing them to the canvas. This demo is compatible with IE7+, Firefox, Chrome, and Safari.

The use case for the particular project is a testing environment where the proctor wants to prevent test-takers from easily copying code and determining the answer using the console or a CLI.

Code blocks can either have random lines inserted, which are then removed using a regular expression before rendering to canvas, or they may be base-64 encoded, or both.

HTML5 Powered with CSS3 / Styling, and Graphics

Sample 1

function bar (baz) {
-- do not copy --
    return function () {
        alert("Do not copy " + baz + "!");
-- do not copy --
-- do not copy --

Sample 2


Sample 3



Place jQuery, the Lockdown script and the Lockdown stylesheet on the page:

<link rel="stylesheet" href="css/lockdown-0.0.38-min.css">

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/modernizr-2.0.6.min.js"></script>
<script src="js/lockdown-0.0.38-min.js"></script>

Once that's in place, you may replace code blocks using the Lockdown.lock method:

        test: Modernizr.canvas,
        nope: "js/flashcanvas/flashcanvas.js",
        complete: function () {
            $(function () {
                var $elements = $("pre.code");
                var options = {
                    jsdir: "lockdown/build/js",
                    width: 580,
                    filterexp: new RegExp("-- do not copy --")
                Lockdown.init( options );
                Lockdown.lock( $elements );

Documentation is available here.


jQuery 1.7+, Modernizr New, Flashcanvas for older browser support





The latest release, 0.0.38, is available here.

You can download this project in either zip or tar formats.

You can also clone the project with Git by running:

$ git clone git://github.com/draeton/lockdown